如何用CSS淡化div的边缘？

Is it possible to achieve this with just one div (no background images/foreground images/layers)?

只用一个div（没有背景图像/前景图像/图层）就可以实现这个目的吗？

4 个解决方案

#1

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-events property (all major browsers except IE<=10) then the text under the gradient will be also selectable/clickable.

如果浏览器支持pointer-events属性（除了IE <= 10之外的所有主要浏览器），则渐变下的文本也将是可选择/可点击的。

#2

<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/

这是你的一个例子http://jsfiddle.net/nrgx7/

#3

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 out effect to any element you want using <fade/> at the end.

我（个人）发现使用辅助元素作为“重叠”非常有效。我这样做是通过定义一个新标签。这样可以很容易地在最后使用 将所需的淡出效果添加到您想要的任何元素。

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 fade element an absolute position with a gradient background works just as expected. As long as you remember to set the parent's position to relative.

使用渐变背景赋予淡入淡出元素绝对位置的效果与预期的一样。只要你记得将父母的位置设置为亲戚。

#4

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。