CSS怎么设置字体发光效果


本文摘自PHP中文网,作者青灯夜游,侵删。

在CSS中,可以利用text-shadow属性来设置字体发光效果;该属性可为文本添加阴影效果,设置阴影的水平偏移量和垂直偏移量为0,增大阴影模糊的距离,即可以达到字体外发光的效果。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在CSS中,可以利用text-shadow属性来设置字体发光效果。

text-shadow属性为文本添加阴影效果,语法如下:

1

text-shadow: h-shadow v-shadow blur color;

  • h-shadow: 水平阴影的位置(阴影水平偏移量),可为负值,必需

  • v-shadow: 垂直阴影的位置(阴影垂直偏移量),可为负值,必需

  • blur: 阴影模糊的距离(默认为0),可选

  • color: 阴影颜色(默认为当前字体颜色),可选

乍一看,text-shadow 属性仅仅是用来设置文本阴影的,似乎并不能实现字体发光效果。

其实不然,这正是 text-shadow 属性的精妙之处。

当阴影的水平偏移量和垂直偏移量都为0时,阴影就和文本重合了

这时,如果增大阴影模糊的距离,就可以达到字体外发光的效果了。

当然,为了使外发光更加酷炫,还需要使用到 text-shadow 的另一个特性: 同时设置多个阴影(使用逗号分隔设置多个阴影)

代码示例:

阅读剩余部分

相关阅读 >>

css如何控制输出字数

css中如何设置背景图像

css怎么设置楷体

css怎么排除第一个子元素

css margin属性怎么用

webkit的css扩展效果

css制作立体导航栏的方法

css边距怎么设置

js和css文件位置对页面性能有什么影响?

html和css的面试知识点总结(附示例)

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...