这篇讲什么
CSS 这两年又加了一波新特性,主要是给特定场景下的视觉效果开了快捷通道 —— 模态框、画中画、自定义滚动条、玻璃磨砂等等。下面整理 8 个最实用的,带浏览器支持版本和实际代码。
:modal 伪类 和 ::backdrop 伪元素 - Chrome 105+
:modal 用来匹配处于"模态"状态的元素,通常配合 <dialog> 元素的 showModal() 方法使用。这种模态框 会自动屏蔽掉后面其他元素的交互,不需要自己手动控制 overflow / pointer-events 等。
配合 ::backdrop 伪元素 —— 浏览器原生提供的模态背景层,可以直接给它写样式,做毛玻璃 / 半透明等效果,比传统的"额外加一个 mask div"简洁多了。
<dialog>
模态框的内容
<button class="closeButton">关闭</button>
</dialog>
<button class="showButton">Show打开</button>
<button class="showModalButton">Show modal打开</button>
用法:
dialog {
border: 10px solid #f00;
}
:modal {
border: 2px solid #000;
}
:picture-in-picture 伪类 - Chrome 105+
给"处于画中画模式"的 <video> 元素加样式。比如视频被拽出画中画窗口时,原位置可以显示一个占位 "Now playing in PiP" 提示。
const showButton = document.querySelector('.showButton')
const showModalButton = document.querySelector('.showModalButton')
const closeButton = document.querySelector('.closeButton')
const dialog = document.querySelector('dialog')
showButton.addEventListener('click', e => {
dialog.show()
})
showModalButton.addEventListener('click', e => {
dialog.showModal()
})
closeButton.addEventListener('click', e => {
dialog.close()
})
:placeholder-shown 伪类 - 全浏览器支持
表单输入元素当前显示 placeholder 文字时(用户还没填),匹配。常用做浮动 label —— 用户开始输入时 label 上飘,效果优雅。
dialog {
border: 10px solid #f00;
}
:modal {
border: 2px solid #000;
}
/* 上面的css和之前的一样 */
/* 这样可以写一个全局的modal背景颜色 */
::backdrop {
background: conic-gradient(red, orange, yellow, green, red);
outline: 20px solid white;
outline-offset: -20px;
}
/* 这样可以写一个指定的 */
dialog::backdrop {
background-color: rgb(0 0 0 / 0.5);
}
配合 transition 用法:
/* 这样将会在视频进入画中画时，在原始坑位展示一个透明度0.3的模糊的样子 */
:picture-in-picture {
opacity: 0.3;
filter: blur(5px);
}
inset 缩写属性 - Chrome 87+
inset 等同于 top + right + bottom + left 四个一起设。绝对定位 / fixed 定位常用:
/* 这样写就是在一个input，有placeholder且还没有输入东西的时候，有一个5px的蓝色边框 */
input:placeholder-shown {
border: 5px solid blue;
}
等价于:
/* 使用inset之前 */
.box {
position: absolute;
top: 20px;
right: 30px;
bottom: auto;
left: 40px;
}
/* 使用inset之后，按上右下左的顺序写，和margin一样 */
.box {
position: absolute;
inset: 20px 30px auto 40px;
}
/* 只设置上下 */
.box {
position: absolute;
inset-block: 10px 20px;
}
/* 只设置左右 */
.box {
position: absolute;
inset-inline: 5% 10%;
}
四个值的写法跟 margin 一样:inset: 10px 20px 表示上下 10px、左右 20px。
scrollbar-gutter - Chrome 94+
滚动条的"占位"控制。默认情况下,某些场景里滚动条会"突然出现",导致页面内容跳一下。scrollbar-gutter: stable 让浏览器始终保留滚动条的空间,即使没滚动条也留出来,避免跳跃。
scrollbar-gutter: auto;
scrollbar-gutter: stable;
scrollbar-gutter: stable both-edges;
backdrop-filter - 大部分现代浏览器
毛玻璃效果。给元素加 backdrop-filter: blur(10px) 就能让元素背后的内容模糊,iOS 风磨砂玻璃感。配合半透明背景,做导航栏、卡片、模态背景视觉极佳。
:root {
scrollbar-gutter: stable;
}
实际场景:
dialog::backdrop {
backdrop-filter: blur(5px);
}
怎么知道某个 CSS 特性能用
查 caniuse.com,输入特性名,看绿色 / 红色分布。一般规则:
- Chrome / Edge / Firefox 三家都绿 → 放心用
- Safari 落后 → 看自己用户群,iOS / macOS 占比高就要谨慎
- IE 11 红的 → 不用管,IE 11 已经死了
渐进增强思路:新特性优先用 (没 fallback),老浏览器用户看到的就是退化版。不要为了 1% 的 IE 用户拖累 99% 的现代浏览器体验。
一句话总结
这几个新 CSS 特性目前主流浏览器都支持(2024 年后),日常项目放心写。backdrop-filter 和 scrollbar-gutter 是出场频率最高的两个,值得记下来。
—— 别看了 · 2026