html - div两侧的颜色逐渐变透明

Question

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

Answer 1

在纯色上:

要使两侧的颜色变淡，您可以使用 2 inset box-shadows具有正模糊和负扩散半径:

DEMO

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 支持框阴影