电话
13363039260
如何使用css3实现字体内发光效果
2024-01-17 13:51 小编
使用css3实现字体发光效果原理
首先我们要输入需要加入特效的文本。
然后我们需要了解的是css3中本身没有发光特效的属性，但是我们可以通过text-shadow属性实现发光效果，那么我们现在着重介绍一下text-shadow属性。
<1>text-shadow属性的基本语法：text-shadow：h-shadowv-shadowblurcolor；
<2>h-shadow:水平阴影的位置(阴影水平偏移量)，可为负值。v-shadow:垂直阴影的位置(阴影垂直偏移量)，可为负值。
<3>blur:阴影模糊的距离(默认为0)。
<4>color:阴影颜色，一般默认为字体的颜色。
<5>此外我们还可以使用text-shadow的另外一个特性：同时设置多个阴影(使用逗号分隔设置多个阴影)。这个特性暂时不做过多的介绍。
使用css3实现字体发光效果实例
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>发光字体</title>
<styletype="text/css">p{color:#0F9;font-size:36px;text-align:center;transition:all0.1s;
text-shadow:1px1px1px#00FF00;}
p:hover{text-shadow:6px6px6px#00FF00;}
</style>
</head>
<body><palign="center">PHP中文网</p>
</body>
</html>
猜你喜欢
联络方式：
13363039260
微信二维码 