CSS設置字體白色描邊
1、使用text-stroke屬性
text-stroke屬性用于向文本添加描邊。此屬性可用于更改文字的描邊寬度和顏色。使用-webkit-前綴支持此屬性。
text-stroke是text-stroke-width和text-stroke-color(給文本填充顏色)兩個屬性的簡寫。
語法:
text-stroke: ;
參數:
width:設置文字的描邊厚度
color:設置文字的描邊顏色
示例:
@import url(https://fonts.googleapis.com/css?family=Bangers);
body {
font-size: 50%;
line-height: 1;
background: palevioletred;
}
h1 {
font: 8em/1 Bangers, sans-serif;
-webkit-text-stroke: 3px #fff;
color:black;
}
Hello World
效果圖:
2、使用text-shadow屬性
text-shadow:向文本設置陰影。
text-shadow:color||length||length||opacity。
color:指定顏色。
length:第一個length指定陰影在水平方向上的延伸距離,第二個length指定陰影在垂直方向上的延伸距離,可以為負值。
opacity:指定陰影模糊效果的作用距離。
用逗號分隔的4個屬性值代表的方向順序為右下左上。
示例:
text-shadow-文字描邊.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;
}
沒有添加描邊
添加了字體描邊
效果圖: