颜色在div的两侧淡入透明

Question

我需要在div的每一侧创建一个颜色渐变的条带，如下图所示，使用CSS。 怎么做？

Answer 1

纯色：

要使两侧的颜色渐变，您可以使用具有正模糊和负展布半径的2插入box-shadows：

<强> DEMO

＆＃13;

＆＃13;

body {
  background: #D4D4CC;
}
div {
  height: 100px;
  background: #fff;
  box-shadow: inset 100px 0px 100px -50px #D4D4CC, 
              inset -100px 0px 100px -50px #D4D4CC;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

---

在图像上：

如果您需要在图像或非纯色上淡化两侧，可以将此方法与伪元素和盒子阴影一起使用：

输出：

＆＃13;

＆＃13;

div{
    height:100px;
    overflow:hidden;
    padding:0 100px;
    margin:20px;
}
div:before{
    content:'';
    display:block;
    height:100%;
    background:#D4D4CC;
    box-shadow: 0px 0px 80px 50px #D4D4CC;
}

body{
    background: url('http://i.imgur.com/hPLqUtN.jpg');
    background-size:cover;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

请注意IE9 and over

支持框阴影

Answer 2

你想要什么，它的css渐变。检查w3schools。

我提供了示例代码。把它放在你的班级

background: -webkit-linear-gradient(left, red , white, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, white, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, white, red); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , white, red); /* Standard syntax (must be last) */
border-top: 5px solid red;
border-bottom: 5px solid red;

Answer 3

您可以使用http://www.colorzilla.com/gradient-editor/

中的渐变/渐变工具

这个小提琴我刚刚为你做的：

http://jsfiddle.net/52f4awdc/

.gradient {

    background: rgb(219,218,210); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(219,218,210,1) 1%, rgba(255,255,255,1) 53%, rgba(219,218,210,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(219,218,210,1)), color-stop(53%,rgba(255,255,255,1)), color-stop(100%,rgba(219,218,210,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(219,218,210,1) 1%,rgba(255,255,255,1) 53%,rgba(219,218,210,1) 100%); /* Chrome10+,Safari5.1+ */
}

Answer 4

您可以尝试这样：

HTML：

<div class="outer">
    <div class="inner"></div>
</div>

CSS：

.outer {
    background-color:#ccc;
    width:400px;
    margin:0 auto;
    height: 30px;
    padding:5px;
}
.inner {
background: -moz-linear-gradient(left, rgba(255,255,255,0.54) 0%, rgba(255,252,173,1) 16%, rgba(255,252,173,1) 85%, rgba(255,255,255,0.41) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.54)), color-stop(16%,rgba(255,252,173,1)), color-stop(85%,rgba(255,252,173,1)), color-stop(100%,rgba(255,255,255,0.41)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0.54) 0%,rgba(255,252,173,1) 16%,rgba(255,252,173,1) 85%,rgba(255,255,255,0.41) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0.54) 0%,rgba(255,252,173,1) 16%,rgba(255,252,173,1) 85%,rgba(255,255,255,0.41) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0.54) 0%,rgba(255,252,173,1) 16%,rgba(255,252,173,1) 85%,rgba(255,255,255,0.41) 100%);
background: linear-gradient(to right, rgba(255,255,255,0.54) 0%,rgba(255,252,173,1) 16%,rgba(255,252,173,1) 85%,rgba(255,255,255,0.41) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8affffff', endColorstr='#69ffffff',GradientType=1 );
      width:100%;
    margin:0 auto;
    height: 100%;
}