IT兄弟连 HTML5教程 CSS3属性特效 文字描边

5f16a58a57bc47108e1c532aebeafd05.jpg

 

用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改。IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度,也能设置其颜色。而且,配合使用color: transparent属性,你还可以创建镂空的字体!

语法如下:

-webkit-text-stroke:宽度 颜色

接下来,为读者准备了一个实例,为段落元素添加文字描边。若浏览器不支持描边则为段落文字设置为蓝色,若支持则为段落文字设置为填充颜色为蓝色,描边颜色为黑色。代码如下:

b22bc8f858d149be86f8d128d310a79e.png

 

将这段代码分别在Chrome、IE和FireFox浏览器中运行,我们就可以看到不同的文字效果,只有在Chrome浏览器中可以看到文字描边效果,如图1所示。

9677d9a49a75408c9d118070b17fd384.jpg

图1  文字描边(Chrome浏览器)

 

我们还可以通过文字阴影text-shadow实现文字描边效果,以下是对使用文字阴影实现描边的几条解释:

(1)text-shadow:向文本设置阴影;

(2)text-shadow: h-shadow v-shadow blur color;

(3)h-shadow:指定阴影在水平方向上的延伸距离,可以为负值;

(4)v-shadow:指定阴影在垂直方向上的延伸距离,可以为负值;

2f993f9e8d5145f19ff1636722342ea2.jpg

图1  未实现文字描边(IE浏览器)    

 

45f3160ca508455c82e27d5f0d408d2c.jpg

图1  未实现文字描边(FireFox浏览器)

(5)blur:指定阴影模糊效果的作用距离;

(6)用逗号分隔的4个属性值代表的方向顺序为右下左上;

(7)为了兼容多浏览器而加上前缀-webkit-和-moz-。

现在想要使用text-shadow实现文字描边效果如上例中的同样设置文字颜色为蓝色描边为黑色,代码如下:

1b4d30ae5a824126a6ee572ab575520c.jpg

将这段代码写在段落样式表中后分别在Chrome、IE和FireFox浏览器中运行,我们就可以看到不同的文字效果,Chrome浏览器和FireFox中可以看到文字描边效果,如图2所示:

b6a593ef86c04a52b1fe81739e58ff64.jpg

图2  利用text-shadow实现文字描边效果(Chrome)

 

a92aef925a824f789f4d089152dafb00.jpg

图2  利用text-shadow实现文字描边效果(IE)

 

d271f2178ec94d26888c6273664bca33.jpg

图2  利用text-shadow实现文字描边效果(FireFox)

 

通过上述两个例子对比,我们可以发现使用-webkit-text-stroke和text-shadow都可以实现文字描边效果。但是text-stroke只支持webkit内核的浏览器,而text-shadow支持webkit和moz内核的浏览器。而text-stroke设置描边会比较简单。通过仔细地对比,我们可以发现两者实现描边的效果有细微的差异,text-stroke例子中,我们为这个属性的宽度设置为2px,而text-shadow的延伸距离也设置为2px。但是text-shadow设置的描边明显宽于text-stroke,原因是text-shadow的描边是往外延伸。text-stroke实现的效果更好,使用方法也更加方便,所以建议读者对文字描边使用-webkit-text-stroke。

-webkit-text-stroke配合使用color: transparent属性,还可以创建镂空的字体,下面实现一个蓝色的镂空字体,代码如下所示:

bfef7c1a110f4d1ab7708de1834c8925.jpg

运行这段代码在Chrome浏览器中运行中可以看到文字镂空效果,如图3所示。

c833f96dfd7542148c8255b84cce338e.jpg

图3 文字镂空效果

posted on 2019-11-13 08:52  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航