您的位置:首页> 前端教程> CSS3教程
文章导航

CSS text-stroke

2019-9-17 08:55| 作者: admin| 查看: 3171| 评论: 0|来自: 蚂蚁部落

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>
1

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

上一篇:CSS text-shadow下一篇:CSS text-fill-color

最新评论

返回顶部