杰晶网络

CSS3 text shadow字体阴影效果
网页制作 2024/11/24 佚名
3 2
最近在整理学习CSS3的一些小知识，现在已经整理了CSS3选择器，CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法。希望能对大家有所帮助吧。
一、text-shadow语法
1、语法：
对象选择器 {text-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色}
注：text-shadow可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“,”分开。
2、取值：
box-shadow属性最多可以有6个参数设置，他们分别取值：
(1) 阴影水平偏移量 ：是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边;
(2) 阴影的垂直偏移量 ：是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部;
(3) 阴影模糊半径 ：此参数是可选，但其值只能是为正值。如果值越大，阴影越模糊，反之阴影越清晰。如果其值为0时，表示阴影不具有模糊效果。
(4) 阴影颜色 ：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
在CSS3没有问世之前，处理文字阴影的方法，基本上都是图片。直到CSS3的出现，让我们制作文字阴影的方法又有了进一步的提高。其实文字阴影——text-shadow在CSS2里面出现过，但是在CSS2.0又没无情的抛弃了，现在CSS3中又让使用了，这说明文字阴影——text-shadow还是值得咱们重视的。所以作为一名合格的前端人员，掌握文字阴影那必须是当务之急了。
CSS3设置文字阴影效果对文字字体设置阴影效果篇text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。
CSS3单词与语法
CSS3单词： text-shadow
语法结构：text-shadow: 5px 2px 6px black;
5px 代表着：阴影距离文字左5px显示
2px 代表着：阴影距离文字上2px显示
6px 代表着：阴影大小范围
black 代表着：阴影颜色为黑色
例子：
CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta charset="utf-8">    
  5. <title></title>    
  6. <style type="text/css">    
  7. .All-orange {    
  8. font: normal 14px 微软雅黑,sans-serif;    
  9. max-width: auto;    
  10. max-height: auto;    
  11. background-color: #f8f8f8;    
  12. padding: 30px 30px 20px 30px;    
  13. color: #666;    
  14. border-radius: 5px    
  15. }    
  16. .All-orange h1 {    
  17. font: normal 32px 微软雅黑,sans-serif;    
  18. padding: 20px 0 20px 40px;    
  19. display: block;    
  20. margin: -30px -30px 10px -30px;    
  21. color: #FFF;    
  22. background-color: #0CF;    
  23. border-radius: 5px;    
  24. text-shadow:5px 2px 6px #000;    
  25. box-shadow: 5px 2px 6px #000;    
  26. }    
  27. .All-orange img {    
  28. float: left    
  29. }    
  30. .All-orange h1 img{    
  31. margin-top: -15px;    
  32. }    
  33. </style>    
  34. </head>    
  35. <body>    
  36. <div class="All-orange" id="all">    
  37. <h1><img src="../img/launcher_icon_.png" />    
  38. 悲伤黑白棋    
  39. </h1>    
  40. </div>    
  41. </body>    
  42. </html>   

效果图：

CSS3 text shadow字体阴影效果


浏览器兼容

此属性为CSS3样式IE9以上版本浏览器支持、谷歌浏览器支持。

CSS3 text shadow字体阴影效果


标签：
css3,text,shadow,css3,字体阴影,css3字体阴影效果
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“CSS3 text shadow字体阴影效果”
暂无“CSS3 text shadow字体阴影效果”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网