如何仅使用 CSS 淡化 div 的边缘？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22666063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fade the edge of a div with just CSS?
提问by antonpug
Is it possible to achieve this with just one div (no background images/foreground images/layers)?
是否可以仅使用一个 div（没有背景图像/前景图像/图层）来实现这一目标？
回答by Fabrizio Calderan
Example on codepen: http://codepen.io/anon/pen/sbHAc/
codepen 示例：http://codepen.io/anon/pen/sbHAc/
Relevant CSS
相关CSS
ol {
border : 1px #d8d8d8 dashed;
position : relative;
}
ol:after {
content : "";
position : absolute;
z-index : 1;
bottom : 0;
left : 0;
pointer-events : none;
background-image : linear-gradient(to bottom,
rgba(255,255,255, 0),
rgba(255,255,255, 1) 90%);
width : 100%;
height : 4em;
}
Resulting effect
产生的效果
if the browser supports the pointer-eventsproperty (all major browsers except IE<=10) then the text under the gradient will be also selectable/clickable.
如果浏览器支持该pointer-events属性（除 外的所有主要浏览器IE<=10），则渐变下的文本也将是可选择/可点击的。
回答by Aleksander Azizi
I (personally) find that using a secondary element as an "overlap" works pretty well. I do this by defining a new tag. This makes it really easy to add the desired fade outeffect to any element you want using <fade/>at the end.
我（个人）发现使用次要元素作为“重叠”效果很好。我通过定义一个新的tag. 这使得将所需的淡出效果添加到<fade/>最后要使用的任何元素变得非常容易。
div {
position: relative;
}
fade {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
height: 50px;
background-image: linear-gradient(to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.9)
100%);
}<div>
text
<br>
text
<br>
text
<fade/>
</div>Giving the fadeelement an absoluteposition with a gradientbackground works just as expected. As long as you remember to set the parent's position to relative.
给fade元素一个absolute带有gradient背景的位置就像预期的那样工作。只要你记得将父级的位置设置为relative.
回答by Aleksander Azizi
<style>
.fade {
position: relative;
bottom: 4em;
height: 4em;
background: -webkit-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -o-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -ms-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
</style>
Here is an example for you http://jsfiddle.net/nrgx7/
回答by andi
I'll go make a fiddle now, but what I'm thinking is that you can use the :after pseudo-element, positioned on top of the original div, to add a white-to-transparent gradient at the bottom of the original div.
我现在要做一个小提琴，但我在想你可以使用 :after 伪元素，位于原始 div 的顶部，在原始 div 的底部添加一个从白色到透明的渐变分区
