搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

CSS3 text-shadow如何实现文字阴影效果

发布时间：2023-01-15 01:52:46 来源：互联网
.
有人说： "要么旅行，要么读书，身体和灵魂，必须有一个在路上。 "这次川西之行我们走进四姑娘山。四姑娘山，是四座并立的山峰，山体陡峭，直指蓝天，冰雪覆盖，银光照人，享有 "蜀山皇后 "的美誉。

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复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <title></title>
  6. <styletype="text/css">
  7. .All-orange{
  8. font:normal14px微软雅黑,sans-serif;
  9. max-width:auto;
  10. max-height:auto;
  11. background-color:#f8f8f8;
  12. padding:30px30px20px30px;
  13. color:#666;
  14. border-radius:5px
  15. }
  16. .All-orangeh1{
  17. font:normal32px微软雅黑,sans-serif;
  18. padding:20px020px40px;
  19. display:block;
  20. margin:-30px-30px10px-30px;
  21. color:#FFF;
  22. background-color:#0CF;
  23. border-radius:5px;
  24. text-shadow:5px2px6px#000;
  25. box-shadow:5px2px6px#000;
  26. }
  27. .All-orangeimg{
  28. float:left
  29. }
  30. .All-orangeh1img{
  31. margin-top:-15px;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <divclass="All-orange"id="all">
  37. <h1><imgsrc="../img/launcher_icon_.png"/>
  38. 悲伤黑白棋
  39. </h1>
  40. </div>
  41. </body>
  42. </html>

效果图：

浏览器兼容

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

以上就是利用CSS3 text-shadow实现的文字阴影效果，希望对大家的学习有所帮助。

以下您可能有感兴趣的文章:
标签： text
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图