Page 187 - css揭秘

第二，当使用一个独立的元素（或伪元素）来实现遮罩层时，这个遮罩
层不仅可以从视觉上把用户的注意力引导到关键元素上，还可以防止用户的
鼠标与页面的其他部分发生交互，因为遮罩层会捕获所有指针事件。box-
shadow 并没有这种能力，因此它只能在视觉上起到引导注意力的作用，却
无法阻止鼠标交互。这一点是否可以接受，取决于你的具体需求。

试一试 play.csssecrets.io/dimming-box-shadow

backdrop 方案

如 果 你 想 引 导 用 户 关 注 的 元 素 就 是 一 个 模 态 的 <dialog> 元 素
（<dialog> 元素可以由它的 showModal() 方法显示出来），那么根据浏览器
的默认样式，它会自带一个遮罩层。借助 ::backdrop 伪元素，这个原生的
遮罩层也是可以设置样式的，比如可以把它变得更暗一些：
不完全支持
dialog::backdrop {
background: rgba(0, 0, 0, .8);
}

这个方法唯一需要注意的地方在于，在编写本书时，浏览器对它的支持
还极为有限。在你使用之前，需要确认一下兼容性问题。不过请记住，尽管
浏览器还不支持它，对话框没有遮罩层也并不会导致任何功能缺失，因为它
只是一种用户体验上的增强手段而已。

试一试 play.csssecrets.io/native-modal

„ CSS 值与单位 相关规范
http://w3.org/TR/css-values/#viewport-relative-
lengths

„ CSS 背景与边框
http://w3.org/TR/css-backgrounds

„ 全屏 API
http://fullscreen.spec.whatwg.org/#::backdrop-pseudo-element

156 第 6 章 用户体验

඀ࠡ JOEC