记录几个新的css属性

前言

今天记录几个 css 新特性。

一、caret-color

caret-color 属性用于指定输入框或任何可编辑文本区域中光标（文本光标）的颜色。它允许你自定义闪烁的垂直线颜色，该垂直线指示将在哪里插入文本。

二、accent-color

accent-color 属性用于指定元素内某些表单控件（如单选按钮、复选框等）的强调色。此属性会覆盖浏览器默认的主题颜色，并将其替换为开发者指定的颜色。

三、hyphens

hyphens 属性会在行尾自动断开长单词，以提高文本的可读性。如果一个单词超出行的宽度，它会在适当的位置断开并移到下一行。

同时使用 hyphens 和 word-break

当 hyphens 和 word-break 同时使用时，word-break 的设置会影响 hyphens 的行为。具体来说，如果 word-break 设置为 break-all 或 break-word，它会覆盖 hyphens 的效果，因为这些值允许在单词内任意位置断行。

四、quotes

quotes 属性用于自定义自动添加到网页上引用文本或 q 元素内文本周围的引号。

五、text-emphasis

text-emphasis 属性用于强调文本块中的某些字符。这些字符通常用于指示文本的含义或重要部分。

注意，这个和 ellipsis 不一样，很多人会把这个和 text-overflow: ellipsis; 搞混淆了，这两个不是一个东西哈。

六、backdrop-filter

backdrop-filter CSS 属性允许你对元素后面的内容应用各种效果。它通常用于模糊背景，更改其颜色或添加阴影，提供一个强大的工具来创建现代网页设计，特别是对于透明或半透明背景。

七、image-rendering

image-rendering 属性用于确定图像的渲染方式。它告诉浏览器在缩放或调整图像大小时使用哪种算法。此属性对于 Web 开发人员在放大或缩小图像时保持质量特别有用。

八、scroll-snap-type

scroll-snap-type 属性用于在滚动容器内的捕捉点之间实现平滑过渡。此功能通过确保内容部分在用户滚动页面时整齐对齐，从而提供更结构化的用户体验。scroll-snap-type 属性控制沿水平或垂直轴的滚动，并定义捕捉点的接合方式。

九、shape-outside

shape-outside 属性定义文本如何围绕 HTML 元素环绕。此属性对于浮动元素特别有用。定义的形状决定了文本围绕该元素的流动，使文本能够平滑地围绕非矩形形状环绕。

十、counter

CSS counter 属性用于自定义数字并自动对 HTML 文档中的特定元素进行编号。此功能可用于向列表项或特定 HTML 元素添加数字。

十一、text-underline-offset

可以指定下划线的距离，没有必要自己实现下划线了。