CSS3 text-stroke

admin發表於2018-07-20

text-stroke屬性可以設定文字的描邊效果。

文字的描邊就類同於文字的邊框,原來只有<div>這樣的元素才可以設定邊框,現在文字也可以。

它是一個複合屬性,語法結構如下:

[CSS] 純文字檢視 複製程式碼
text-stroke:[ text-stroke-width ] || [ text-stroke-color ]

引數解析:

(1).text-stroke-width:設定元素中文字的描邊厚度。

(2).text-stroke-color:設定元素中文字的描邊顏色。

瀏覽器支援:

(1).IE11+瀏覽器支援此屬性。

(2).edge瀏覽器支援此屬性。

(3).火狐瀏覽器支援此屬性。

(4).谷歌瀏覽器支援此屬性。

(5).Safari瀏覽器支援此屬性。

(6).opera瀏覽器支援此屬性。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  font-size:100px;
  text-stroke:2px #45B823;
  -webkit-text-stroke:2px #45B823;
  -moz-text-stroke:2px #45B823;
}
</style>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>

上面的程式碼實現了設定文字描邊的效果;text-stroke是一個複合屬性,也可以將它們拆開單獨設定:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  font-size:100px;
  text-stroke-width:2px;
  -webkit-text-stroke-width:2px;
  text-stroke-color:#45B823;
  -webkit-text-stroke-color:#45B823;
}
</style>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>