CSS是引人入胜且用户界面友好的强大网站开发工具之一。在本文中，我将分享 22 个 CSS 技巧，帮助你增强文本样式、创建流畅的交互并优化你的 UI 设计。
在开始之前，别忘了关注我的公众号平台【web前端开发】，从而可以获取最新的编程技巧、开发工具和学习资源，提升您的 Web 开发技能。
那现在，就让我们开始吧！
01、为文本创建阴影效果
我们可以使用 text-shadow 属性为文本创建阴影效果，从而营造深度并使文本更具视觉吸引力。
text-shadow: h-shadow v-shadow blur-radius color;
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Text-Shadow Property</title> <style> h1 { text-shadow: 2px 2px 5px #585858; } </style> </head> <body> <h1>Text-Shadow</h1> </body> </html>
02、更改文本首字母的颜色
我们可以使用 ::first-letter 伪元素更改文本首字母的颜色。
这允许我们仅定位和设置任何文本块的首字母的样式，从而轻松地为其应用不同的颜色、字体样式或大小。
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>::first-letter Pseudo-Element</title> <style> p { font-size: 1em; font-weight: 500; } p::first-letter { color: #4763ff; font-size: 2em; font-weight: bold; } </style> </head> <body> <p> This is an example paragraph. The first letter will be colored differently. </p> </body> </html>
03、为文本添加描边
要在 CSS 中为文本添加描边，我们可以使用 -webkit-text-stroke 属性。
此属性受基于 WebKit 的浏览器（例如 Chrome、Safari 和 Edge）支持。它允许我们为文本应用描边效果，使其呈现轮廓外观。
语法：
text-stroke: <stroke-width> <stroke-color>;
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Text-Stroke</title> <style> h1 { color: rgb(148, 206, 240); -webkit-text-stroke: 2px rgb(77, 147, 187); } </style> </head> <body> <h1>Text-Stroke</h1> </body> </html>
04、控制文本与其下划线之间的垂直距离
我们可以使用 text-underline-offset 属性来控制文本与其下划线之间的垂直距离。
语法：
text-underline-offset: <length>;
<length>：指定下划线偏移的距离。该值可以采用像素 (px)、em (em)、rem (rem) 等单位。
05、控制文本对齐
当 text-align 属性设置为 justify 时，我们可以使用 text-justify 属性来控制文本的对齐方式。
此属性提供了多种方法来调整字符或单词之间的间距，以确保文本在容器的整个宽度上均匀对齐。
语法：
auto：默认对齐方式。它根据字体和上下文确定文本的对齐方式。
inter-word：在单词之间添加空格以使文本对齐，使单词之间的间距更大。
inter-character：在各个字符之间添加空格以使文本对齐。这可能会导致间距不均匀，尤其是在文本包含长单词的情况下。
none：禁用任何对齐方式，并保持单词或字符之间的默认间距。
initial：将值重置为默认设置。
inherit：从父元素继承对齐方式。
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Text-Justify</title> <style> h1 { text-align: justify; text-justify: inter-character; } </style> </head> <body> <h1>This is an example text.</h1> </body></html>
06、更改文本选择颜色
我们可以使用 CSS 中的 ::selection 伪元素更改网页上文本选择的默认颜色。这允许我们更改网页上选定文本的背景颜色和文本颜色，并替换浏览器的默认样式，使其与网站主题保持一致。
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Changing the Text Selection Color</title> <style> ::selection { background: #cf624e; color: #ffffff; } </style> </head> <body> <h1>This is an example text.</h1> </body></html>
07、跨浏览器兼容性
为了更好地支持某些浏览器的旧版本，请添加 Firefox 的 ::-moz-selection 伪元素：
::selection { background: #cf624e; color: #ffffff;}::-moz-selection { background: #cf624e; color: #ffffff; }
::selection 只能设置背景和颜色属性的样式。其他属性（例如字体大小、文本装饰等）不受支持。
08、平滑滚动
您无需使用任何 JavaScript，只需一行 CSS 代码即可实现网页的平滑滚动。
html { scroll-behavior: smooth;}
向 HTML 元素添加 scroll-behavior: Smooth; 可确保所有锚链接或其他页内导航（如 #section）顺利滚动到目标部分。
09、创建流畅且引人入胜的效果
CSS 过渡效果可让您在网页上创建流畅且引人入胜的效果。
这些过渡效果通过动画效果而非即时变化来提升用户体验。
当指定属性在定义的持续时间内发生变化时，就会发生 CSS 过渡。我们可以为颜色、尺寸、不透明度等属性定义过渡效果。
语法：
element { transition: property duration timing-function delay;}
property：要设置动画的 CSS 属性（例如，颜色、宽度、不透明度）。
duration：过渡所需的时长（例如，2 秒、500 毫秒）。
timing-function（可选）：定义过渡的速度（例如，ease、linear、ease-in-out）。
delay（可选）：开始过渡前的等待时间（例如，1 秒）。
10、更改文本光标的颜色
我们可以使用 caret-color 属性更改 <input> 或 <textarea> 元素的文本光标颜色，使其与您的网页配色方案相匹配。
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Changing the Color of Text Cursor</title> <style> input { caret-color: tomato; } </style> </head> <body> <input type="text" placeholder="Type something here..." /> </body></html>
11、浏览器支持
caret-color 属性在 Chrome、Firefox、Safari 和 Edge 等现代浏览器中均受支持，但在较旧的版本中可能不受支持。
12、控制用户文本选择权限
user-select 属性可用于控制用户选择元素内文本的权限。
语法：
element { user-select: value;}
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Controlling Text Selection</title> <style> div { width: max-content; border: 3px solid purple; user-select: none; } </style> </head> <body> <div> <p>You can't select this text.</p> </div> <p>You can select this text.</p> </body></html>
用例
某些网站可能会使用 user-select: none; 来保护内容不被轻易复制（尽管这并非万无一失的方法）。
浏览器支持
user-select 属性在现代浏览器中得到广泛支持。然而，旧版本的 Internet Explorer 不支持该属性。
13、自定义列表点
要在 CSS 中自定义列表点，我们可以使用 ::marker 伪元素。
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="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>
14、控制溢出文本
CSS 中的 text-overflow 属性用于控制当文本超出容器宽度时如何处理溢出文本。
当文本空间有限，并且想要添加省略号 (...) 或其他效果来指示文本过长而无法完全显示时，该属性尤其有用。
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Text-overflow</title> <style> div { width: 150px; border: 1px solid black; } p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div> <p>This is an example of CSS text-overflow property.</p> </div> </body></html>
文本溢出的用例
导航栏：在文本可能溢出的小型导航链接中，您可以使用它来保持界面整洁。
UI 中的文本截断：当您需要截断较长的标题、描述或其他内容，同时仍显示有更多信息时。
响应式设计：在容器大小发生变化的设计中（例如调整浏览器大小时），文本溢出可确保文本适合容器大小，从而保持可读性。
15、控制文本的方向和流向
CSS 中的 writing-mode 属性允许我们控制元素中文本的方向和流向。
writing-mode 的值
示例 1：horizontal-tb（默认）
它使文本从左到右、从上到下水平排列。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Writing Mode</title> <style> div { display: flex; border: 1px solid black; } h1 { color: rgb(119, 50, 119); writing-mode: horizontal-tb; } </style> </head> <body> <div> <h1>Heading</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium recusandae reiciendis assumenda quidem ea ducimus doloremque necessitatibus exercitationem. Quod commodi alias optio placeat explicabo. Omnis facere officiis facilis distinctio veritatis iusto, praesentium, incidunt ullam quam earum fugiat? Harum libero officiis minima? Itaque ipsam nostrum reiciendis iste nulla. Dicta, voluptatem ab? </p> </div> </body> </html>
示例 2：sideways-rl
此值将文本逆时针旋转 90 度，并使其从右向左排列。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Writing Mode</title> <style> div { display: flex; border: 1px solid black; } h1 { color: rgb(119, 50, 119); writing-mode: sideways-rl; } </style> </head> <body> <div> <h1>Heading</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium recusandae reiciendis assumenda quidem ea ducimus doloremque necessitatibus exercitationem. Quod commodi alias optio placeat explicabo. Omnis facere officiis facilis distinctio veritatis iusto, praesentium, incidunt ullam quam earum fugiat? Harum libero officiis minima? Itaque ipsam nostrum reiciendis iste nulla. Dicta, voluptatem ab? </p> </div> </body> </html>
示例 3：sideways-lr
此值将文本顺时针旋转 90 度，并使其从左向右排列。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Writing Mode</title> <style> div { display: flex; border: 1px solid black; } h1 { color: rgb(119, 50, 119); writing-mode: sideways-lr; } </style> </head> <body> <div> <h1>Heading</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium recusandae reiciendis assumenda quidem ea ducimus doloremque necessitatibus exercitationem. Quod commodi alias optio placeat explicabo. Omnis facere officiis facilis distinctio veritatis iusto, praesentium, incidunt ullam quam earum fugiat? Harum libero officiis minima? Itaque ipsam nostrum reiciendis iste nulla. Dicta, voluptatem ab? </p> </div> </body> </html>
示例 4：vertical-rl
此值使文本从上到下垂直排列，行距从右到左。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Writing Mode</title> <style> div { display: flex; border: 1px solid black; } h1 { color: rgb(119, 50, 119); writing-mode: vertical-rl; } </style> </head> <body> <div> <h1>Heading</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium recusandae reiciendis assumenda quidem ea ducimus doloremque necessitatibus exercitationem. Quod commodi alias optio placeat explicabo. Omnis facere officiis facilis distinctio veritatis iusto, praesentium, incidunt ullam quam earum fugiat? Harum libero officiis minima? Itaque ipsam nostrum reiciendis iste nulla. Dicta, voluptatem ab? </p> </div> </body> </html>
示例 5：vertical-lr
此值使文本从上到下垂直排列，但行从左到右排列。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Writing Mode</title> <style> div { display: flex; border: 1px solid black; } h1 { color: rgb(119, 50, 119); writing-mode: vertical-lr; } </style> </head> <body> <div> <h1>Heading</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium recusandae reiciendis assumenda quidem ea ducimus doloremque necessitatibus exercitationem. Quod commodi alias optio placeat explicabo. Omnis facere officiis facilis distinctio veritatis iusto, praesentium, incidunt ullam quam earum fugiat? Harum libero officiis minima? Itaque ipsam nostrum reiciendis iste nulla. Dicta, voluptatem ab? </p> </div> </body> </html>
用例
亚洲语言：许多亚洲语言（例如日语、中文和韩语）在某些特定情况下传统上使用垂直文本流，尤其是在分栏书写时。
设计效果：您可以使用书写模式创建独特的文本效果，例如垂直旋转的文本或按栏排列的文本。
16、限制文本块的行数
我们可以使用 -webkit-line-clamp 属性轻松限制文本块的行数。
当我们想在不依赖 JavaScript 的情况下将文本限制在固定行数内时，此功能尤其有用。
此属性仅在 display 属性设置为 -webkit-box 或 -webkit-inline-box 且 -webkit-box-orient 属性设置为 Vertical 时有效。
浏览器兼容性
17、控制用户调整元素大小的能力
我们可以使用 CSS 的 resize 属性来控制用户调整元素大小的能力。要使 resize 属性生效，元素必须具有 overflow 值。
resize 属性最常用于 <textarea> 等元素或 <div> 等包含可滚动内容的容器。
语法：
element { resize: none | both | horizontal | vertical;}
resize 属性的值
none：用户无法调整元素大小。调整大小手柄被隐藏。
vertical：用户只能在垂直方向上调整元素大小。
horizontal：用户只能在水平方向上调整元素大小。
both：用户可以在水平和垂直方向上调整元素大小。
18、存储值并复用
CSS 变量允许我们将值存储在一个位置，并在整个样式表中复用它们。这有助于保持一致性，并使我们的 CSS 代码更易于管理和更新。
语法：
你可以使用 -- 前缀定义 CSS 变量。
例如：
:root { --primary-color: #3498db; --secondary-color: #2ecc71; --font-size: 16px; }
:root: :root 选择器用于定义全局变量。它充当变量的全局作用域，使它们在整个样式表中均可访问。
--primary-color, --secondary-color: 这些是 CSS 变量名称。这些值会被存储，并可在样式表的任何需要的地方重复使用。
然后，我们可以在整个 CSS 中使用这些变量：
body { font-size: var(--font-size); color: var(--primary-color);}h1 { color: var(--secondary-color);}
19、使用 CSS 变量的优势
可重用性：变量一旦定义，即可在样式中多次重复使用，从而避免重复。
可维护性：如果我们需要更改某个值（例如主色），只需在 :root 选择器中更新它，所有使用该变量的样式都会自动更新。
灵活性：我们可以使用 JavaScript 动态更新 CSS 变量，或将其与媒体查询结合使用，根据屏幕尺寸或主题等条件调整样式。
20、更改输入框的默认颜色
我们可以使用 accent-color 属性更改复选框和单选按钮等输入框的默认颜色。
这有助于我们将样式与网站设计相匹配。
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Default Color of Inputs</title> <style> input[type="checkbox"] { accent-color: #ff6347; } </style> </head> <body> <label> <input type="checkbox" /> Option 1 </label> <label> <input type="checkbox" /> Option 2 </label> </body> </html>
这对于在表单输入（如复选框、单选按钮和范围滑块）中保持一致的配色方案特别有用，以匹配我们网站的品牌，从而提供无缝的用户体验。
^= 属性选择器
我们可以使用 ^= 属性选择器来选择指定属性值以特定字符串开头的元素。此选择器在处理具有动态或部分属性值的元素时尤其有用。
~= 属性选择器
我们可以使用 ~= 属性选择器来选择指定属性包含完整单词的元素。这对于匹配属性值以空格分隔的元素（例如类或自定义属性）尤其有用。
~= 选择器匹配以空格分隔的列表中的精确单词。部分匹配（例如子字符串）不起作用。
现在，我们可能想知道 ~= 选择器和直接使用类名 .special 选择元素之间有什么区别。
我们可以直接使用类名选择元素，但当您想要选择具有 class 或 id 以外属性的元素时，此选择器非常有用。
例如，假设您有多个 <div> 元素，每个 <div> 都有一个 data-role 属性，该属性可以包含多个角色。
现在，我们想要选择所有 data-role 属性中包含单词 admin 的元素，那么 ~= 属性选择器可以方便地实现这一点。
<div data-role="admin editor">Admin and Editor</div><div data-role="admin viewer">Admin and Viewer</div><div data-role="viewer">Only Viewer</div>
div[data-role~="admin"] { background-color: yellow;}
仅前两个 <div> 元素将被设置样式，因为它们的 data-role 属性包含“admin”一词。
21、:not() CSS 选择器
我们可以使用 :not() CSS 选择器来选择与指定选择器不匹配的元素。
它提供了一种从一组选定元素中排除特定元素的方法。
语法：
selector:not(specific-selector) { }
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>:not() CSS Selector</title> <style> div:not(.unique) { background-color: lightblue; } </style> </head> <body> <div>This will be light blue.</div> <div class="unique">This will not be styled.</div> <div>Another light blue div.</div> </body> </html>
我们不能在 :not() 选择器内嵌套复杂的选择器，例如，组合器（> 或 +）。
:empty 伪类
我们可以使用 :empty 伪类来选择不包含任何子元素或文本内容的元素。这包括空格，因为即使元素内部有一个空格或换行符，也会导致其不再匹配 :empty。
语法：
选择器：我们要定位的元素。
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>:empty Pseudo-Class</title> <style> div:empty { background-color: lightgray; border: 1px solid black; } </style> </head> <body> <div> </div> <div>Not empty</div> <div> </div> </body> </html>
:has() 伪类
我们可以使用 :has() 选择器选择包含特定子元素的元素，然后对其应用样式。
这允许我们根据父元素的子元素有条件地为其添加样式。
语法：
selector:has(child-selector) { }
示例 1：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>:has() Pseudo-Class</title> <style> .card:has(img) { padding: 10px; border: 2px solid blue; } </style> </head> <body> <div class="card"> <p>No image here.</p> </div> <div class="card"> <img src="cat.jpg" alt="Cat Image" /> </div> </body> </html>
第二个 <div> 将被设置样式，因为它包含一个 <img> 元素。
示例 2：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> :has() Pseudo-Class </title> <style> ul:has(li.special) { background-color: tomato; } </style> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <ul> <li class="special">Special Item</li> </ul> </body> </html>
第二个 <ul> 将被设置样式，因为它包含一个带有 special 类的 <li>。
浏览器支持
目前，Chrome、Edge 和 Safari 等现代浏览器支持 :has()，但旧版本或某些浏览器可能不完全支持。
性能
由于 :has() 允许基于子元素设置父元素的样式，因此对于大型 DOM 树来说，它的计算量可能很大。为了保持网站快速加载，请仅在真正需要时使用 :has()。
今天就到这里！希望这篇文章能对你有所帮助。
阅读原文：https://mp.weixin.qq.com/s/PSP_W1jhFGdtsJc1FEgZJA
该文章在 2025/6/11 9:52:49 编辑过
400 186 1886
