小編給大家分享一下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(給文本填充顏色)兩個屬性的簡寫。
語法:
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:第一個length指定陰影在水平方向上的延伸距離,第二個length指定陰影在垂直方向上的延伸距離,可以為負值。
opacity:指定陰影模糊效果的作用距離。
用逗號分隔的4個屬性值代表的方向順序為右下左上。
示例:
<!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è)資訊頻道,感謝各位的閱讀!
當前文章:css設(shè)置字體白色描邊的方法-創(chuàng)新互聯(lián)
標題路徑:http://www.chinadenli.net/article38/doshsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計、企業(yè)建站、網(wǎng)站排名、微信小程序、商城網(wǎng)站、網(wǎng)站維護
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容