如何仅使用CSS淡化div的边缘? [英] How to fade the edge of a div with just CSS?

问题描述

是否可以仅使用一个div(没有背景图像/前景图像/图层)来实现这一目标?

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

推荐答案

codepen上的示例: http://codepen.io/anon/pen/sbHAc/

Example on codepen: http://codepen.io/anon/pen/sbHAc/

相关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

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

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.

这篇关于如何仅使用CSS淡化div的边缘?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！