text-stroke给文字描边

最新推荐文章于 2024-08-18 00:00:48 发布

load_life

最新推荐文章于 2024-08-18 00:00:48 发布

阅读量963

点赞数

分类专栏： CSS3 文章标签： webkit css 浏览器 web

本文链接：https://blog.csdn.net/load_life/article/details/7856424

版权

CSS3 专栏收录该内容

97 篇文章 1 订阅

订阅专栏

Web中给标题之类描边的效果时不时的有，在以前都只能使用图片来制作这种效果，现在CSS3中的text-shadow虽然的做出类似的描边效果，但效果并不佳，其实CSS3中还有一个属性，制作描边效果非常的棒，这个属性就是——text-stroke。只可惜的是现在这个属性仅有webkit内核的浏览器支持。

其使用语法是：

.elm {
  -webkit-text-stroke: width color;
}

简单的看个实例效果

.blackandwhite{
	font-family: 'Courgette';
	font-size:3em;
	color: black;
	text-align: center;
        -webkit-text-fill-color: white;
        -webkit-text-stroke: 2px black;
}