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

发表于 更新于 分类于 本文字数： 126 阅读时长 ≈ 1 分钟

文本描边

使用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>