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 代表着：阴影颜色为黑色
例子：
XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .All-orange { font: normal 14px 微软雅黑,sans-serif; max-width: auto; max-height: auto; background-color: #f8f8f8; padding: 30px 30px 20px 30px; color: #666; border-radius: 5px } .All-orange h1 { font: normal 32px 微软雅黑,sans-serif; padding: 20px 0 20px 40px; display: block; margin: -30px -30px 10px -30px; color: #FFF; background-color: #0CF; border-radius: 5px; text-shadow:5px 2px 6px #000; box-shadow: 5px 2px 6px #000; } .All-orange img { float: left } .All-orange h1 img{ margin-top: -15px; } </style> </head> <body> <div class="All-orange" id="all"> <h1><img src="../img/launcher_icon_.png" /> 悲伤黑白棋 </h1> </div> </body> </html>效果图：
浏览器兼容
此属性为CSS3样式IE9以上版本浏览器支持、谷歌浏览器支持。
以上就是利用CSS3 text-shadow实现的文字阴影效果，希望对大家的学习有所帮助。
相关文章
Laurie
2020-11-30
Iola
2021-03-04
Dabria
2020-01-05
Efia
2020-03-26
Viridis
2023-02-26
Tertia
2023-02-26
Elina
2023-03-29
Querida
2023-04-14
Serafina
2023-04-19
Rhea
2023-04-19
Malinda
2023-04-19
Kathy
2023-04-19
Nora
2023-04-19
Pandora
2023-04-19
Tani
2023-04-19
Tanisha
2023-04-19
Viridis
2023-05-13
Thalia
2023-05-17