css - CSS渐变颜色，仅在开头和结尾

Question

是否可以创建这样的渐变线？

background: -webkit-gradient(linear, 0 0, 100% 0, from(#CCC), 
to(#CCC), color-stop(50%, #333));

这个 CSS 褪色的长度比我想要的要长。

Answer 1

来自 colorzilla.com：

background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(10%,rgba(0,0,0,1)), color-stop(90%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );

Answer 2

试试这个：

-webkit-linear-gradient(left, #ccc 0%, #333 3%, #333 97%, #ccc 100%)

根据需要随意调整百分比。

Answer 3

不幸的是，我不认为这种渐变可以在 IE9 或更低版本中完成。

background-image: -moz-linear-gradient(left, white 0%, black 10%, black 90%, white 100%);
background-image: -o-linear-gradient(left, white 0%, black 10%, black 90% white 100%);
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, white), color-stop(0.1, black),color-stop(0.9, black),color-stop(1, white));
background-image: -ms-linear-gradient(right, white 0%, black 10%, black 90%, white 100%);
background-image: linear-gradient(to left, white 0%, black 10%, black 90%, white 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='black',GradientType=1 );

Answer 4

关于我的评论，在你尝试之前不要说不：

<div style="width:500px;height:20px;background:black;">

    <div style="position:absolute;left:0;width:100px;height:20px;background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDI1NSwyNTUsMjU1LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMCwwLDAsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);background: -o-linear-gradient(left, rgba(255,255,255,1), rgba(0,0,0,1));background: -moz-linear-gradient(left, rgba(255,255,255,1), rgba(0,0,0,1));background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255,255,255,1)), color-stop(1, rgba(0,0,0,1)));filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FFFFFFFF,EndColorStr=#FF000000);-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FFFFFFFF,EndColorStr=#FF000000)""></div>
    <div style="position:absolute;right:0;width:100px;height:20px;background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDAsMCwwLDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMjU1LDI1NSwyNTUsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);background: -o-linear-gradient(left, rgba(0,0,0,1), rgba(255,255,255,1));background: -moz-linear-gradient(left, rgba(0,0,0,1), rgba(255,255,255,1));background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0,0,0,1)), color-stop(1, rgba(255,255,255,1)));filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF000000,EndColorStr=#FFFFFFFF);-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FF000000,EndColorStr=#FFFFFFFF)""></div>
</div>​

这是一个jsfiddle：http: //jsfiddle.net/kEQKb/10/