css設定字體白色描邊的方法：1、使用text-stroke屬性，可以設定文字的描邊寬度和顏色，語法格式「text-stroke: 3px #fff;」；2、使用text -shadow屬性為字體四周添加白色陰影，實現描邊效果。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css設定字體白色描邊
#1、使用text-stroke屬性
text -stroke屬性用於在文字上新增描邊。此屬性可用於變更文字的描邊寬度和顏色。使用-webkit-前綴支援此屬性。
text-stroke是text-stroke-width和text-stroke-color（為文字填滿顏色）兩個屬性的簡寫。
語法：
text-stroke: <width> <color>;
參數：
#width：設定文字的描邊厚度
color：設定文字的描邊顏色
#範例：
<!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;
}
h1 {
font: 8em/1 Bangers, sans-serif;
-webkit-text-stroke: 3px #fff;
color:black;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>效果圖：
2、使用text-shadow屬性
text-shadow:設定陰影陰影。
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影片教學】
以上是css怎麼設定字體白色描邊的詳細內容。更多資訊請關注PHP中文網其他相關文章！
