使用css添加文字描邊主要有兩種方法：1. 使用text-stroke屬性，它能直接為文字添加平滑描邊，但兼容性有限，尤其在非webkit瀏覽器和舊版本瀏覽器中可能不支持，因此需要配合-webkit-text-stroke使用以提升兼容性；2. 使用text-shadow屬性通過多方向陰影模擬描邊效果，雖然兼容性更好，但描邊較粗時可能出現鋸齒。兩者可根據項目需求和目標瀏覽器選擇使用，也可結合使用以兼顧效果與兼容性。
添加文字描邊，最直接的方法就是使用css的text-stroke屬性。不過，兼容性方面需要注意，可能需要一些額外的處理。
解決方案
text-stroke屬性允許你為文字添加描邊，但它并非所有瀏覽器都完全支持。因此，在使用時需要考慮兼容性問題。
立即學習“前端免費學習筆記（深入）”；
.stroked-text { color: white; /* 文字顏色 */ -webkit-text-stroke: 2px black; /* WebKit 瀏覽器（Chrome, Safari） */ text-stroke: 2px black; /* 標準屬性 */ }
這段代碼會給文字添加一個2像素寬的黑色描邊。color: white 定義了文字本身的顏色，而-webkit-text-stroke是為了兼容基于WebKit內核的瀏覽器。
兼容性問題
雖然text-stroke是CSS標準，但并非所有瀏覽器都完全支持。尤其是老版本的瀏覽器，可能無法正確渲染。
替代方案：text-shadow
如果需要更好的兼容性，可以使用text-shadow屬性來模擬描邊效果。雖然效果不如text-stroke那么完美，但兼容性更好。
.shadowed-text { color: white; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; }
這段代碼通過在文字周圍創建四個陰影，模擬了描邊效果。調整陰影的偏移量和模糊半徑，可以改變描邊的粗細和效果。這種方法的缺點是，如果描邊較粗，可能會出現鋸齒。
如何調整描邊的粗細和顏色？
直接修改CSS代碼中的數值即可。例如，將text-stroke: 2px black改為text-stroke: 4px red，就可以將描邊加粗并改變顏色。使用text-shadow模擬時，需要調整陰影的偏移量來改變描邊的粗細。例如，將-1px -1px 0 black改為-2px -2px 0 black，描邊會更粗。同時，顏色也直接在text-shadow中指定。
text-stroke和text-shadow哪個更好？
這取決于你的需求和目標瀏覽器的兼容性。text-stroke在支持的瀏覽器中效果更好，描邊更平滑。但如果需要兼容老版本的瀏覽器，text-shadow是更可靠的選擇。實際上，很多時候會結合使用這兩種方法，先使用text-stroke，然后使用text-shadow作為備選方案。
如何使用JavaScript動態修改描邊樣式？
可以通過JavaScript來動態修改元素的CSS樣式。例如，可以使用以下代碼來修改元素的text-stroke屬性：
const element = document.getElementById('myText'); element.style.webkitTextStroke = '3px blue'; // WebKit 瀏覽器 element.style.textStroke = '3px blue'; // 標準屬性
這段代碼會將id為myText的元素的描邊設置為3像素寬的藍色。類似地，也可以使用JavaScript來動態修改text-shadow屬性。注意，使用JavaScript修改樣式時，需要考慮到瀏覽器的兼容性，可能需要編寫一些額外的代碼來處理不同瀏覽器的差異。
