700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html文字加描边效果 CSS3实现文字描边效果

html文字加描边效果 CSS3实现文字描边效果

时间:2021-12-01 07:52:44

相关推荐

html文字加描边效果 CSS3实现文字描边效果

以前想实现文字描边效果只能用PS制作图片,现在我们可以用CSS3就可以实现文字描边效果其实,不用图片还可以文字描边哦,下面看青岛星网的实现方式。

CSS3实现文字描边效果,这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果。

给需要实现文字描边的元素添加如下CSS3的属性-webkit-text-shadow:#0001px00,#00001px0,#000-1px00,#0000-1px0;-moz-text-shadow:#0001px00,#00001px0,#000-1px00,#0000-1px0;

text-shadow:#0001px00,#00001px0,#000-1px00,#0000-1px0;

实现前效果:

实现后效果:

text-shadow的语法解释

text-shadow:向文本设置阴影。

text-shadow:color||length||length||opacity。

text-shadow:x位移 y位移 模糊程度 颜色

color:指定颜色。

length:第一个length指定阴影在水平方向上的延伸距离,第二个length指定阴影在垂直方向上的延伸距离,可以为负值。

opacity:指定阴影模糊效果的作用距离。

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

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

青岛星网温馨提醒:用text-shadow实现文字描边的缺点就算:IE9以前的版本都不支持这个text-shadow属性。

想学习text-shadow属性的更多使用方法可以阅读:CSS3的text-shadow使用详解

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。