accent-color - 强调颜色

为了保持用户界面的一致性，您可以使用强调颜色属性来更改输入的默认颜色。

1
2
3
4
5
6
<form>
   <input type="radio" id="html" />
   <label for="html">HTML</label>
   <input type="radio" id="css" />
   <label for="css">CSS</label>
</form>

1
2
3
input {
  accent-color: red;
}

Before

After

backdrop-filter - 模糊效果

backdrop-filter属性对元素后面的区域应用滤镜效果（模糊效果）。

1
2
3
4
5
<div class="container">
  <div class="box">
     <p>This is an example of backdrop-filter property.</p>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 350px;
  width: 350px;
  background: url(/img/posts/html/css.png) no-repeat center;
}
.box {
  padding: 10px;
  font-weight: bold;
  color: white;
  background-color: transparent;
  backdrop-filter: blur(10px);
}

Before

This is an example of backdrop-filter property.

After

This is an example of backdrop-filter property.

caret-color - 光标颜色

当您使用 input 或 textarea 元素时，可以使用 caret-color 属性更改这些元素的文本光标的颜色.

1
<input type="text" placeholder="Hello World!" />

1
2
3
input {
  caret-color: red;
}

Before

After

image-rendering - 图像渲染

使用image-rendering图像渲染属性来控制缩放图像的渲染并优化质量。属性不会影响未缩放的图像。

1
2
3
img {
  image-rendering: pixelated;
}

inset - 内边距

使用inset属性将元素的边缘与另一个元素的边缘重叠。而不是使用 top、right、bottom、left 属性。

1
2
3
4
5
6
7
8
9
10
11
12
div {
  position: absolute;
  top: 20px;
  right: 25px;
  left: 16px;
  bottom: 23px;
}
/*等价于*/
div {
  position: absolute;
  inset: 20px 25px 16px 23px;
}

mix-blend-mode - 混合模式

设置元素内容与其背景的混合，可以使用 mix-blend-mode 属性。

1
2
3
<div class="mixblendmode">
  <img src="cat.jpg" alt="cat" />
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.mixblendmode {
    max-width: 120px;
    max-height: 120px;
    border: 2px solid #000000;
    border-radius: 3px;
    background-color: orange;
    padding: 0 10px 10px 0;
}
.mixblendmode img {
    max-width: 100px;
    max-height: 100px;
    margin: 0 !important;
    border-radius: 3px;
}

Before

After

object-fit - 图像对象尺寸

object-fit属性允许您调整图像/视频的尺寸，以适应其容器。

1
2
3
<div class="objectfit">
  <img src="cat.jpg" alt="cat" />
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.objectfit {
    max-width: 120px;
    max-height: 120px;
    border: 2px solid #000000;
    border-radius: 3px;
    background-color: orange;
    padding: 0 10px 10px 0;
}
.objectfit img {
    max-width: 100px;
    max-height: 100px;
    margin: 0 !important;
    border-radius: 3px;
}

Before

After