请选择 进入手机版 | 继续访问电脑版

巅峰霸主

 找回密码
 立即注册

QQ登录

只需一步,快速开始

css文字阴影text-shadow写出发光的效果来

[复制链接]
烈火大地 发表于 2019-7-5 09:38:50 | 显示全部楼层 |阅读模式

游客只能显示部分内容,请登录后查看帖子完整内容!!!注册完全免费。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
css文字阴影使用text-shadow这个标签,加上一点点装饰就写出发光字体的效果啦。
  1. .fg {
  2.     font-weight: 200;
  3.     color: white;
  4.     text-shadow: 0px 0px 12px rgba(255,255,255,0.4);
  5.     font-size: 67.5px;
  6.     font-family: "Exo", sans-serif;
复制代码
上面的css效果如下,看上去很酷:
搜狗截图20190705092844.png


所有主流浏览器都支持 text-shadow 属性。

注释:Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。


=================

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. h1 {
  6. text-shadow:0 0 3px #FF0000;
  7. }
  8. </style>
  9. </head>
  10. <body>

  11. <h1>霓虹灯效果的文本阴影!</h1>

  12. </body>
  13. </html>
复制代码

运行效果

搜狗截图20190705093557.png

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. h1 {
  6. color:white;
  7. text-shadow:2px 2px 4px #000000;
  8. }
  9. </style>
  10. </head>
  11. <body>

  12. <h1>白色文本的阴影效果!</h1>

  13. </body>
  14. </html>
复制代码
运行效果
搜狗截图20190705093732.png

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|巅峰霸主 ( 京ICP备12023415号-2 )

声明:本站的任何信息和内容仅代表作者的立场和观点,与巅峰霸主网无关。

禁止在巅峰霸主网发布任何与《中华人民共和国法律》相抵触的言论!

GMT+8, 2019-7-23 23:21 , Processed in 0.082940 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表