以前想实现文字描边效果只能用PS制作图片,现在我们可以用CSS3就可以实现文字描边效果其实,不用图片还可以文字描边哦,下面看编程之家的实现方式。
CSS3实现文字描边效果,这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果。
给需要实现文字描边的元素添加如下CSS3的属性
-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
实现前效果:
实现后效果:
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使用详解
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。