CSS的描邊(text-stroke)是一種可以為文字添加輪廓線條的樣式,使得文字看起來更加醒目,讓文字在頁面中更加突出。
p { font-size: 36px; color: #fff; -webkit-text-stroke: 1px #000; text-stroke: 1px #000; }
上述代碼中,我們使用了text-stroke屬性為文字添加了1像素寬的黑色描邊,同時使用了-webkit-text-stroke屬性以支持Webkit內核的瀏覽器。text-stroke屬性可以設置描邊寬度和描邊顏色。
需要注意的是,text-stroke是CSS3的新特性,不是所有的瀏覽器都支持該屬性。在使用該屬性時,也需要考慮到瀏覽器的兼容性問題。另外,text-stroke的描邊效果一般在背景為單色的情況下效果最為明顯。
p { font-size: 36px; color: #fff; -webkit-text-stroke: 1px #000; text-stroke: 1px #000; background: #f00; }
上述代碼中,我們為p標簽添加了紅色背景,與黑色描邊形成了鮮明的對比,文字顯得更加突出。
總的來說,text-stroke是一個有趣的樣式屬性,可以很好的達到文字突出的效果,但是需要在使用時考慮到瀏覽器的兼容性和文本的顯示效果,不能用于所有場景。