分别使用text-stroke和text-shadow为文本描边

文本描边

使用text-stroke属性

目前text-stroke仅支持webkit内核的浏览器,所以格式为

1
2
-webkit-text-stroke:1px black; //描边宽度 描边颜色
-webkit-text-fill-color:white; //为文本填充颜色

代码:

1
2
3
4
5
6
7
<h1>测试text-stroke属性</h1>
<style type="text/css">
h1{
-webkit-text-stroke: 1px black;
-webkit-text-fill-color: white;
}
</style>

结果

使用text-shadow属性

代码:

1
2
3
4
5
6
7
8
9
10
<h1>测试text-stroke属性</h1>
<style type="text/css">
h1{
color:white;
text-shadow:-2px -2px 1px black,
2px -2px 1px black,
-2px 2px 1px black,
2px 2px 1px black;
}
</style>

Disqus 加载中...

如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理