前言
今天记录几个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
可以指定下划线的距离,没有必要自己实现下划线了。