小編給大家分享一下css設(shè)置字體白色描邊的方法,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
css設(shè)置字體白色描邊的方法:1、使用text-stroke屬性,語法格式“text-stroke: 3px #fff;”;2、使用text-shadow屬性給字體四周添加白色陰影。
css設(shè)置字體白色描邊
1、使用text-stroke屬性
text-stroke屬性用于向文本添加描邊。此屬性可用于更改文字的描邊寬度和顏色。使用-webkit-前綴支持此屬性。
text-stroke是text-stroke-width和text-stroke-color(給文本填充顏色)兩個(gè)屬性的簡寫。
語法:
text-stroke: <width> <color>;
參數(shù):
width:設(shè)置文字的描邊厚度
color:設(shè)置文字的描邊顏色
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Bangers); body { font-size: 50%; line-height: 1; background: palevioletred; } h2 { font: 8em/1 Bangers, sans-serif; -webkit-text-stroke: 3px #fff; color:black; } </style> </head> <body> <h2>Hello World</h2> </body> </html>
效果圖:
2、使用text-shadow屬性
text-shadow:向文本設(shè)置陰影。
text-shadow:color||length||length||opacity。
color:指定顏色。
length:第一個(gè)length指定陰影在水平方向上的延伸距離,第二個(gè)length指定陰影在垂直方向上的延伸距離,可以為負(fù)值。
opacity:指定陰影模糊效果的作用距離。
用逗號分隔的4個(gè)屬性值代表的方向順序?yàn)橛蚁伦笊稀?/p>
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>text-shadow-文字描邊</title> <style> .demo { height: 200px; text-align: center; font-family: Verdana; font-size: 30px; font-weight: bold; background: peru; color: #000; } .stroke { text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0; } </style> </head> <body> <div class="demo"> <p>沒有添加描邊</p> <p class="stroke">添加了字體描邊</p> </div> </body> </html>
效果圖:
看完了這篇文章,相信你對“css設(shè)置字體白色描邊的方法”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
當(dāng)前文章:css設(shè)置字體白色描邊的方法-創(chuàng)新互聯(lián)
標(biāo)題路徑:http://chinadenli.net/article38/doshsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、企業(yè)建站、網(wǎng)站排名、微信小程序、商城網(wǎng)站、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容