Page 190 - css揭秘

法（比如，前一篇攻略提到的 box-shadow 方案）来实现阴影效果，从而起
到回退样式的作用。这个方法还可以避免在图 6-17 边缘处出现的“光晕效
应”。在图 6-18 中，我们用一层投影来实现调暗背景的效果，光晕的问题就
不复存在了。

试一试 play.csssecrets.io/deemphasizing-blur

向 Hakim El Hattab（http://hakim.se）脱帽致敬，感谢他提出了一个
类似的效果（http://lab.hakim.se/avgrund）。另外，在 Hakim 的实现中，页
面背景还会通过 scale() 变形属性来产生缩小效果，从而进一步增强景
深效果，让我们感觉对话框真的离我们更近了。 致 敬

„ 滤镜效果
http://w3.org/TR/filter-effects 相关规范

„ CSS 过渡
http://w3.org/TR/css-transitions

34 滚动提示

背景知识

CSS 渐变，background-size

难题 图 6-19

这个容器内包含了很多内容，是
滚动条是一种常见的界面控件，用来提示一个元素除了可以看到的内容
可以滚动的；但如果不跟它交互，
之外，还包含了更多内容。但是，它往往太过笨重，在视觉上喧宾夺主，因 你就不会知道

34 滚动提示 159

඀ࠡ JOEC