如何在CSS中實現文字白邊并添加陰影效果？

css樣式技巧：打造醒目文字，兼顧白邊和陰影

在網頁設計中，為文字添加白邊和陰影能顯著提升視覺效果和可讀性。本文將探討如何高效實現這一效果，并解決常見問題。

一些開發者嘗試通過text-shadow屬性創建文字白邊，但效果并不理想，尤其是在添加陰影時。 例如，以下代碼雖然能產生白邊，但無法同時添加有效的陰影：

.text-with-border {   color: black; /* 文字顏色 */   text-shadow:      -1px -1px 0 #fff, /* 左上方白色陰影 */      1px -1px 0 #fff, /* 右上方白色陰影 */     -1px  1px 0 #fff, /* 左下方白色陰影 */      1px  1px 0 #fff; /* 右下方白色陰影 */ }

更有效的方案是利用-webkit-text-stroke屬性。該屬性專門用于創建文字描邊，可以精確控制描邊的寬度和顏色。 以下代碼展示了如何使用-webkit-text-stroke創建白邊：

.text {   -webkit-text-stroke: 2px white; /* 2像素寬的白色描邊 */ }

為了同時添加陰影效果，只需結合text-shadow屬性即可：

立即學習“前端免費學習筆記（深入）”；

.text {   -webkit-text-stroke: 6px white; /* 6像素寬的白色描邊 */   text-shadow: 0 4px 0 black; /* 黑色陰影 */ }

通過這種方法，我們成功地為文字添加了清晰的白邊和陰影，提升了文字的視覺沖擊力，也為設計師提供了更靈活的樣式控制。 記住，-webkit-text-stroke具有瀏覽器兼容性問題，需要根據實際情況選擇合適的替代方案或添加前綴。