CSS新用法 - :modal、::backdrop、:picture-in-picture、:placeholder-shown、inset、scrollbar-gutte、backdrop-filter🎐

type

status

date

slug

summary

解释: :modal 用来写模态框的样式，使用show()弹出的模态框可以与后面的元素继续交互，但是使用showModal() 弹出的模态框，将像个真的模态框，有半透明的背景，不可与背景后的元素交互，并且在页面中居中

在下面这个例子中，使用show()打开的模态框，使用的样式将会是dialog的样式，使用showModal()打开的模态框样式将会是:modal的样式

解释：用于指定showModal()打开的模态框，后面的遮罩层的样式（一般是半透明黑色的那个）

解释: :picture-in-picture伪类可以用来为处于画中画模式(PIP)的元素（通常是<video>）添加样式。支持此API的浏览器有Chrome、Edge、Safari和Opera。Firefox不支持此API，但可以右键单击视频并选择“在画中画中观看”。

解释: 用来写带有placeholder，但是还没有输入的样式

解释：当我们定位一个元素时，通常要top: 5px, right: 5px, left…。写多了挺麻烦，inset属性一行搞定4个值

解释: scrollbar-gutter可以让滚动条出现的时候内容不晃动。

解释：可以让你为一个元素后面区域添加效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，但是为了看到效果，至少得带点透明

这个属性其实已经有一段时间了，不算那么新，我们可以结合前文提到的::backdrop来使用，让模态框弹出时，背景的遮罩层更好看一些