文章目录
- 自动处理所有间距
- 水平垂直居中
- 多行文本截断,超出省略
- 自动均衡折行
- 竖排文字
- 文字融合效果
- :active 元素激活状态
- :first-child 第一个子元素
- :nth-child() 选择指定的子元素
- :not() 反向选择器
- @media 响应式媒体查询
- @supports 特性检测查询
- var() css自定义变量使用
- calc() 动态值计算
- min() max() 动态取值函数
- clamp() 响应式取值函数
- :hover 鼠标悬停状态
- :focus 元素获取焦点状态
- text-shadow 为文本创建阴影效果
- ::first-letter 伪元素更改文本首字母的颜色
- -webkit-text-stroke为文本添加描边
- text-underline-offset 控制文本与其下划线之间的垂直距离
- 控制文本对齐 text-justify: value;
- 使用 CSS 中的 ::selection 伪元素更改网页上文本选择的默认颜色
- 平滑滚动
- 更改文本光标的颜色
- 控制用户文本选择权限 element { user-select: value;}
- 自定义列表点::marker 伪元素
- 控制文本的方向和流向 writing-mode
- 控制用户调整元素大小的能力
- 更改输入框的默认颜色
自动处理所有间距
/*gap 支持 Flex 和 Grid*/.container{display:flex;gap:16px;}
水平垂直居中
/*place-items 是 align-items + justify-items 的缩写，Grid 专属*/.parent{display:grid;place-items:center;/* 水平+垂直同时居中 */}
多行文本截断,超出省略
.text-clamp{display:-webkit-box;-webkit-line-clamp:3;/* 行数 */-webkit-box-orient:vertical;overflow:hidden;}
自动均衡折行
h1, h2, h3{text-wrap:balance;/* 浏览器自动计算最优折行点 */}
竖排文字
/* horizontal-tb（默认）水平排列 vertical-rl： 垂直排列 右→左（新列在左侧） vertical-lr： 垂直排列 左→右（新列在右侧） sideways-rl：文字顺时针旋转 90°，垂直上→下，块流右→左 sideways-lr：文字逆时针旋转 90°，垂直下→上，块流左→右 */.vertical-text{writing-mode:horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;}
文字融合效果
/*文字根据背景颜色自动反色融合，滚动时颜色随背景变化*/.blend-text{color:white;mix-blend-mode:difference;/* 颜色反差融合 */}
:active 元素激活状态
button:active{transform:scale(1.2);}
:first-child 第一个子元素
li:first-child{color:yellow;}
:nth-child() 选择指定的子元素
奇数位置的列表项（<li> 元素）设置红色背景 li:nth-child(odd){ background:red; }
:not() 反向选择器
div:not(.add){opacity:0.8;}
@media 响应式媒体查询
@media(max-width:768px){}
@supports 特性检测查询
/* 检测浏览器是否支持Grid布局 */@supports(display:grid){.container{display:grid;grid-template-columns:1fr 1fr;gap:20px;}/* 可以在这里放置所有依赖Grid的样式 */}
var() css自定义变量使用
color:var(--primary-color)
calc() 动态值计算
width:calc(100% / 3)
min() max() 动态取值函数
width:max(300px,60%)
clamp() 响应式取值函数
font-size:clamp(1rem,1vw,2rem)
:hover 鼠标悬停状态
button:hover{}
:focus 元素获取焦点状态
input:focus{}
text-shadow 为文本创建阴影效果
- h-shadow：水平阴影位置（必需）。
- v-shadow：垂直阴影位置（必需）。
- blur-radius：可选。定义模糊距离。值越大，阴影越模糊。
- color：可选。指定阴影的颜色。
text-shadow:h-shadow v-shadow blur-radius color;
::first-letter 伪元素更改文本首字母的颜色
p::first-letter
-webkit-text-stroke为文本添加描边
- 基于 WebKit 的浏览器（例如 Chrome、Safari 和 Edge）支持
- stroke-width：定义描边（轮廓）的宽度
- stroke-color：定义描边的颜色
text-stroke:<stroke-width> <stroke-color>
text-underline-offset 控制文本与其下划线之间的垂直距离
- length：指定下划线偏移的距离。该值可以采用像素 (px)、em (em)、rem (rem) 等单位。
text-underline-offset:<length>;
控制文本对齐 text-justify: value;
- text-align 属性设置为 justify 时,使用 text-justify 属性来控制文本的对齐方式
- auto：默认对齐方式。它根据字体和上下文确定文本的对齐方式
- inter-word：在单词之间添加空格以使文本对齐，使单词之间的间距更大。
- inter-character：在各个字符之间添加空格以使文本对齐。这可能会导致间距不均匀，尤其是在文本包含长单词的情况下。
- none：禁用任何对齐方式，并保持单词或字符之间的默认间距。
- initial：将值重置为默认设置。
- inherit：从父元素继承对齐方式。
使用 CSS 中的 ::selection 伪元素更改网页上文本选择的默认颜色
::selection, ::-moz-selection{background:#cf624e;color:#ffffff;}
平滑滚动
html{scroll-behavior:smooth;}
更改文本光标的颜色
- 使用 caret-color 属性更改 或 元素的文本光标颜色
input{caret-color:tomato;}
控制用户文本选择权限 element { user-select: value;}
- value：此属性有以下值。
- auto：默认行为（允许文本选择）。
- none：禁用文本选择。
- text：允许选择文本，但这是包含文本的元素的默认设置。
- contain：阻止用户选择元素内的文本，但允许选择其子元素中的文本。
自定义列表点::marker 伪元素
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Customize List Points</title><style>ul li::marker{content:"★";color:gold;font-size:20px;}</style></head><body><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></body></html>
控制文本的方向和流向 writing-mode
- writing-mode 的值
- horizontal-tb（默认）它使文本从左到右、从上到下水平排列
- sideways-rl 此值将文本逆时针旋转 90 度，并使其从右向左排列
- sideways-lr 此值将文本顺时针旋转 90 度，并使其从左向右排列
- vertical-rl 此值使文本从上到下垂直排列，行距从右到左
- vertical-lr 此值使文本从上到下垂直排列，但行从左到右排列
控制用户调整元素大小的能力
- 使用 CSS 的 resize 属性来控制用户调整元素大小的能力。要使 resize 属性生效，元素必须具有 overflow 值。
- resize 属性最常用于 等元素或
等包含可滚动内容的容器。
- 语法： element { resize: none | both | horizontal | vertical;}
- none：用户无法调整元素大小。调整大小手柄被隐藏
- vertical：用户只能在垂直方向上调整元素大小
- horizontal：用户只能在水平方向上调整元素大小
- both：用户可以在水平和垂直方向上调整元素大小
更改输入框的默认颜色
- accent-color 属性更改复选框和单选按钮等输入框的默认颜色
input[type="checkbox"]{accent-color:#ff6347;}
