CSS（级联样式表）是网页设计的支柱，用于设计网站的视觉呈现。虽然您可能已经熟悉许多 CSS 属性，但存在一些较少讨论的属性，它们可以增强您的样式功能。在这篇文章中，我将向您介绍 15 个带有代码片段的 CSS 属性。

强调色

当涉及到复选框和单选按钮等输入时，浏览器通常会使用默认颜色，该颜色可能与 UI 的选定配色方案不太协调。

若要保持 UI 的一致性，可以使用 accent-color 属性更改输入的默认颜色。

例如：

<form>   <input type="radio" id="html" />   <label for="html">HTML</label>   <input type="radio" id="css" />   <label for="css">CSS</label>   <input type="radio" id="js" />   <label for="js">JavaScript</label></form>

CSS系统：

input {  accent-color: green;}

输出：

背景滤镜

有时，您可能希望将滤镜效果（模糊效果）应用于元素后面的区域。为此，可以使用 backdrop-filter 属性。

例如：

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

CSS系统：

.container {  display: flex;  align-items: center;  justify-content: center;  height: 350px;  width: 350px;  background: url(img.webp) no-repeat center;}.box {  padding: 10px;  font-weight: bold;  color: white;  background-color: transparent;  backdrop-filter: blur(10px);}

输出：

插入色符号

使用输入或 textarea 元素时，可以使用 caret-color 属性更改这些元素的文本光标的颜色，以匹配网页配色方案。

例如：

<input type="text" placeholder="Your Name" />

CSS系统：

input {  caret-color: red;}

图像渲染

可以使用 image-rendering 属性来控制缩放图像的渲染并优化质量。

请记住，此属性不会影响未缩放的图像。

img {  image-rendering: pixelated;  /* Other values: auto, smooth, high-quality, crisp-edges, pixelated, initial, inherit */}

插入

在处理位置时，可以使用 inset 属性，而不是使用 top、right、bottom、left 属性。

例如：

div {  position: absolute;  top: 20px;  right: 25px;  left: 16px;  bottom: 23px;}/*You can write the above property as*/div {  position: absolute;  inset: 20px 25px 16px 23px;}

混合-混合-模式

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

例如：

<div>  <img src="cat.jpg" alt="cat" /></div>

CSS系统：

div {  width: 600px;  height: 400px;  background-color: rgb(255, 187, 0);}img {  width: 300px;  height: 300px;  mix-blend-mode: luminosity;}

输出：

此属性具有以下值：

正常、乘法、屏幕、叠加、变暗、变亮、颜色减淡、颜色燃烧、差异、排除、色调、饱和度、颜色、亮度。

对象拟合

您可以使用 object-fit 属性设置图像或视频的大小调整行为，使其适合其容器。

例如：

<div>  <img src="cat.jpg" alt="cat" /></div>

CSS系统：

div {  width: 500px;  height: 400px;  border: 3px solid purple;}img {  width: 500px;  height: 300px;  object-fit: cover; /* Other values: fill, contain, cover, scale-down, none, initial, inherit */}

输出：

对象位置

object-position 属性与 object-fit 属性一起使用，以指定图像或视频在其内容框内使用 x/y 坐标的位置。

例如：

<div>  <img src="cat.jpg" alt="cat" /></div>

CSS系统：

div {  width: 500px;  height: 400px;  border: 3px solid purple;}img {  width: 500px;  height: 300px;  object-fit: cover;  object-position: bottom right;}

输出：

简单地说，这里我指定了object-position: bottom right;这意味着它将在调整图像大小时显示图像的右下角。

轮廓偏移

可以使用 outline-offset 属性指定轮廓和元素边框之间的间距。

例如：

<div></div>

CSS系统：

div {  width: 300px;  height: 300px;  border: 3px solid purple;  outline: 3px solid rgb(81, 131, 148);  outline-offset: 10px;}

输出：

指针事件

可以使用 pointer-events 属性控制元素对指针事件的反应。

例如：

<div>   <p class="first">      Please <a href="https://shefali.dev/blog">Click here</a>   </p>   <p class="second">      Please <a href="https://shefali.dev/blog">Click here</a>   </p></div>

CSS系统：

.first {  pointer-events: none; /*here all the pointer events will be set to none. So the user can't click on the link.*/}.second {  pointer-events: auto;}

滚动行为

您可以使用 scroll-behavior 属性实现平滑滚动，而无需使用任何 JavaScript，只需一行 CSS。

例如：

html {  scroll-behavior: smooth;}

文本对齐

将 text-align 的值设置为justify时，可以使用 text-justify 属性来设置文本的对齐方法.

例如：

p {  text-align: justify;  text-justify: inter-character;/*Other values: auto, inter-word, inter-character, none, initial, inherit*/}

在这里，我已将该值设置为inter-character，因此当您调整窗口大小时，它将增加或减少字符之间的间距。您也可以尝试其他值。

文本溢出

有时您的文本太大而无法放入其容器中。在这种情况下，若要控制文本的行为，可以使用 text-overflow 属性。

例如：

<div>  <p>This is an example of text-overflow.</p></div>

CSS系统：

div {  width: 100px;  height: 40px;  border: 3px solid purple;}p {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

输出：

用户选择

user-select 属性可用于控制用户选择文本的能力。

例如：

<div>   <p>You can't select this text.</p></div><p>You can select this text.</p>

CSS系统：

div {  width: max-content;  height: 40px;  border: 3px solid purple;  user-select: none;}

分词符

word-break 属性用于指定在到达行尾或调整窗口大小时单词应如何中断。

例如：

p {  word-break: break-all;  /* Other values: normal, break-all, keep-all, break-word, initial, inherit */}