CSS之::backdrop伪元素

::backdrop伪元素就是控制需要视觉聚焦的元素后面的背景元素样式的。

dialog::backdrop {
  background: rgba(255,0,0,.25);
}

在web中哪些元素需要视觉聚焦呢？一个是HTML5 <video>视频元素，还有就是HTMl5.2 <dialog>元素，以及处于全屏状态下的普通元素。

• ::backdrop除了控制背景，还可以控制尺寸，加阴影等。
• ::backdrop不继承任何元素同时也不被任何元素继承，任何CSS都可以应用，没有限制。
• ::backdrop伪元素兼容性与<dialog>一致，目前仅部分浏览器支持，前往caniuse查看。