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 中 @ 用法详解

background-image属性怎么用

怎样在css中解决长英文单词的页面显示问题?

html5 canvas实现中奖转盘的实例代码

响应式css前端框架有哪些

css的rem是什么

css实现自适应宽度的菜单(代码实例)

使用css flexbox构建网站标题

css怎么才能让字等距分开

css怎么实现文字横排

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




打赏

取消

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

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

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

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

评论

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