div 两侧的颜色逐渐变透明

Question

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

Answer 1

纯色：

要使两边的颜色变淡，您可以使用具有正模糊和负扩展半径的 2 个插图 box-shadows：

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

<div></div>

图片上方：

如果您需要使图像或非纯色的两面都变淡，可以将此方法与伪元素和框阴影一起使用：

输出：

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;
}

<div></div>

请注意 IE9 and over

支持框阴影

Answer 2

你想要的那种，它的 css 渐变。查看 w3schools。

我提供了一个示例代码。把这个放在你的class

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/

的渐变工具

还有这个fiddle我刚为你做的：

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%;
}

div 两侧的颜色逐渐变透明

Colour fade to transparent on both sides of a div

html

css

gradient

纯色：

图片上方：