小编给大家分享一下CSS3如何实现文字描边,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>问题
最近遇到一个需求,需要实现文字的描边效果,如下图
& lt; ! DOCTYPE html>
& lt; html>
,,,& lt; head>
,,,,,,,& lt; meta charset=癠TF-8"比;
,,,,,,,& lt; title> text-stroke——文字描边& lt;/title>
,,,,,,,& lt; style>
,,,,,,,,,,,.demo {
,,,,,,,,,,,,,,,颜色:,mistyrose;
,,,,,,,,,,,,,,,text-align:,中心;
,,,,,,,,,,,,,,,字体类型:,Verdana;
,,,,,,,,,,,,,,,字体大小:,30 px;
,,,,,,,,,,,,,,,粗细:,大胆;
,,,,,,,,,,,}
,,,,,,,,,,,.stroke {
,,,,,,,,,,,,,,,-webkit-text-stroke:, 1 px greenyellow;
,,,,,,,,,,,}
,,,,,,,& lt;/style>
,,,& lt;/head>
,
,,,& lt; body>
,,,,,,,& lt; div 类=癲emo"比;
,,,,,,,,,,,& lt; p>没有添加描边& lt;/p>
,,,,,,,,,,,& lt; p 类=皊troke"在添加了字体描边& lt;/p>
,,,,,,,& lt;/div>
,,,& lt;/body>
& lt;/html>
<强>,解决方法二(推荐)
偶然间发现一种即使不用text-stroke属性也能够实现文字描边的方法,终止,和终止,文本阴影
并且文本阴影属性的兼容性更好,也不用加前缀webkit -
& lt; ! DOCTYPE html>
& lt; html>
,,,,& lt; head>
,,,,,,,,,,& lt; meta charset=癠TF-8"比;
,,,,,,,,,,& lt; title>文本阴影——文字描边& lt;/title>
,,,,,,,,,,& lt; style>
,,,,,,,,,,,,,,,.demo {
,,,,,,,,,,,,,,,,,,,text-align:,中心;
,,,,,,,,,,,,,,,,,,,,字体类型:,Verdana;
,,,,,,,,,,,,,,,,,,,,字体大小:,30 px;
,,,,,,,,,,,,,,,,,,,,粗细:,大胆;
,,,,,,,,,,,,,,,,,,,,颜色:,红色;
,,,,,,,,,,,,,,,}
,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,.stroke {
,,,,,,,,,,,,,,,,,,,,文本阴影:,# 000,1 px 0, 0,, # 000, 0, 1 px 0,, # 000, 1 px 0, 0,, # 000, 0, 1 px 0;
,,,,,,,,,,,,,,,}
,,,,,,,,,,& lt;/style>
,,,,& lt;/head>
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
