本文约 800+ 字，整篇阅读约需 1 分钟。
逐日分享一段优质代码片段。
本日禀享一段优质 CSS 代码片段，实现 CSS 笔墨镂空的效果。
老规矩，先阅读代码片段并思考，再看代码解析再思考，末了评论区留下你的见地！
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>css笔墨镂空</title> <style> div { margin: 10% auto; font-size: 60px; font-weight: bold; text-align: center; /字体粗细/ -webkit-text-stroke: 1px red; /描边/ -webkit-text-fill-color: transparent; } </style> </head> <body> <div>笔墨镂空</div> </body></html>分享缘故原由
这段代码展示了如何利用 CSS 为文本添加描边效果和透明添补颜色，从而实现有趣的笔墨镂空视觉效果。
它展示了当代 CSS 特性的利用，让我们利用几行代码，就可以轻松实现较繁芜的样式效果。
在项目中确实可能会用到，到时候直接来CV即可。
我越来越以为，CSS真的是 yyds ！
代码解析
1. margin: 10% auto;
将元素的高下边距设置为父元素高度的10%，旁边边距自动，这样可以将元素在水平方向居中，在垂直方向看着也比较舒畅。
2. -webkit-text-stroke: 1px red;
为文本添加1像素宽的赤色描边。
-webkit-text-stroke 是一个非标准的 CSS 属性，用于在 WebKit 内审阅读器中为文本添加描边效果。
它由两个部分组成：描边的宽度和描边的颜色。这个属性可以创建一些特殊的视觉效果，如在玄色背景上用白色描边的笔墨等。
这是一个 WebKit 特性，以是带有 -webkit- 前缀。此属性在支持 WebKit 内核的浏览器中有效，例如 Chrome 和 Safari。
3. -webkit-text-fill-color: transparent;
将文本的添补颜色设置为透明。
-webkit-text-fill-color 也是一个非标准的 CSS 属性，用于在 WebKit 内审阅读器中设置文本的添补颜色。
这个属性与标准的 color 属性类似，但它的设计目的是与 -webkit-text-stroke 一起利用，以供应更高等的文本样式。
这同样是一个 WebKit 特性。
- end -
