CSS3 text-stroke

admin發表於2018-07-20
CSSS3

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>

相關文章