css - 如何仅使用 CSS 淡化 div 的边缘？

Question

<分区>

Answer 1

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

---

结果效果

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