- accent-color
- caret-color
- ::selection (pseudo class)
- user-select
- :empty (pseudo class)
accent-color
accent-color 属性可以在不改变浏览器默认表单组件基本样式的前提下重置组件的颜色。例如我们的复选框、单选框、范围选择框、进度条等。
用法示例：
css选择器{
accent-color: 颜色;
}
注意：
- 当我们给
accent-color属性选择较浅的颜色的时候，我们选择组件的的背景色会自动加深，形成反色差。 - 当我们给我们的选择组件添加
border属性时，我们的accent-color属性会失效
兼容性
caret-color
caret-color属性可以改变输入框插入光标的颜色，同时又不改变输入框里面的内容的颜色。
代码示例：
input {
caret-color: red;
}
兼容性
::selection (pseudo class)
::selection (pseudo class)可以设置我们用户在选择文字时的背景色和文字颜色
代码示例：
#app::selection {
background: red;
color: rgb(68, 51, 223);
}
#app1::selection {
background: rgb(57, 204, 64);
color: white;
}
兼容性
backdrop-filter
backdrop-filter的作用是给我们的背景添加滤镜的效果。调节我们的背景。
| 滤镜属性 | 中文意思 |
|---|---|
| blur() | 模糊 |
| brightness() | 亮度 |
| contrast() | 对比度 |
| drop-shadow() | 投影 |
| grayscale() | 灰度 |
| hue-rotate() | 色调变化 |
| invert() | 反相 |
| opacity() | 透明度 |
| sepia() | 饱和度 |
| saturate() | 褐色 |
代码示例：
div.background {
background: url(image.jpg) no-repeat center;
background-size: cover;
height: 100px;
width: 100px;
}
div.filterbox {
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: sepia(100%);
width: 50px;
height: 100px;
}
兼容性
empty (pseudo class)
empty (pseudo class)可以帮我们匹配所有没有子元素的元素。子元素只可以是元素节点或文本（包括空格）
代码示例：
HTML
<div class="box"><!-- 我是蓝色 --></div>
<div class="box">I will be pink</div>
<div class="box">
<!-- 因为我里面有空格，所以我也是有子元素的，所以我是粉红色，如果把空格删掉我就是蓝色 -->
</div>
css
.box {
background: pink;
height: 80px;
width: 80px;
}
.box:empty {
background: rgb(0, 81, 255);
}
兼容性
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 22 天，点击查看活动详情
