當我們想要讓文字在網頁中與背景或其他元素進行區分時,常常會使用描邊的效果。在CSS中,描邊文字是一項常用的技巧,下面介紹兩種實現方法。
.text { /*文字顏色*/ color: #fff; /*文字描邊*/ text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
這里我們使用text-shadow屬性來實現文字的描邊。其中,text-shadow屬性后跟的是四個參數,依次代表橫向位移、縱向位移、模糊半徑和顏色。值得注意的是,我們需要使用多次text-shadow來實現多層描邊的效果。
.text { color: #fff; -webkit-text-stroke: 1px #000; }
除了使用text-shadow屬性,還可以使用-webkit-text-stroke屬性來實現文字描邊。其中,-webkit-text-stroke屬性后跟的是描邊寬度和顏色。需要注意的是,這種方式只能在webkit內核的瀏覽器中生效。
上一篇css中如何添加背景圖片
下一篇css中如何放置圖片標簽