大家好，我是大澈！
本文約?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 -
——RemoteAttestation)
