文章目录自动处理所有间距水平垂直居中多行文本截断,超出省略自动均衡折行竖排文字文字融合效果: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-colortext-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 伪元素!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8/metahttp-equivX-UA-CompatiblecontentIEedge/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleCustomize List Points/titlestyleul li::marker{content:★;color:gold;font-size:20px;}/style/headbodyulliItem 1/liliItem 2/liliItem 3/li/ul/body/html控制文本的方向和流向 writing-modewriting-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[typecheckbox]{accent-color:#ff6347;}