CSS3文本阴影text-shadow属性详解
发布时间:2016-08-08 11:45:31 作者:佚名 我要评论
下面小编就为大家带来一篇关于CSS3文本阴影text-shadow属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
文本阴影text-shadow属性特效:
1.右下角阴影,左下角阴影,左上角阴影,右上角阴影
XML/HTML Code复制内容到剪贴板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>text-shadow</title>
- <style>
- p{
- text-align:center;
- margin:0;
- font-family: helvetica,arial,sans-serif;
- color:#999;
- font-size:80px;
- font-weight:bold;
- text-shadow:10px 10px #333;
- }
- </style>
- </head>
- <body>
- <p>Text Shadow</p>
- </body>
- </html>
文字效果为:
如果将text-shadow改成:text-shadow:-10px 10px #333 ,就将出现左下角阴影
将text-shadow改成:text-shadow:-10px -10px #333 , 就将出现左上角阴影
将text-shadow改成:text-shadow: 10px -10px #333 , 就将出现右上角阴影
2. 使用text-shadow设置立体文字效果
XML/HTML Code复制内容到剪贴板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>text-shadow</title>
- <style>
- p{
- text-align:center;
- margin:0;
- font-family: helvetica,arial,sans-serif;
- color:#999;
- font-size:80px;
- font-weight:bold;
- text-shadow:-1px -1px #fff,
- 1px 1px #333;
- }
- </style>
- </head>
- <body>
- <p>Text Shadow</p>
- </body>
- </html>
以上这篇CSS3文本阴影text-shadow属性详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
- CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果,本文给大家介绍纯CSS3代码实现文字描2016-04-25
- 这篇文章主要介绍了CSS将文字描边及填充文字颜色的方法,分别为text-stroke和text-fill-color属性的使用方法讲解,注意浏览器的兼容问题,需要的朋友可以参考下2016-03-07
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
下面小编就为大家带来一篇CSS3利用text-shadow属性实现多种效果的文字样式展现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-08-25CSS3实现千变万化的文字阴影text-shadow效果设计
这篇文章主要介绍了CSS3实现千变万化的文字阴影text-shadow效果设计的相关资料,感兴趣的小伙伴们可以参考一下2016-04-26- 这篇文章主要介绍了CSS3 text-shadow实现文字阴影效果的方法,丰富文字排版布局美化效果,感兴趣的小伙伴们可以参考一下2016-02-24
- 这篇文章主要介绍了举例详解CSS中的text-shadow文字阴影效果使用,text-shadow的运用是CSS入门学习中的基础知识,需要的朋友可以参考下2015-08-19
- 这篇文章主要介绍了用CSS的text-shadow制作超炫文字效果全攻略,文中给出了诸多阴影效果示例,超级推荐!需要的朋友可以参考下2015-07-23
- 前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法,这几次继续整理了有关于CSS3的text-shadow的使用方法,需要了解的朋友可以详细2012-12-25
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
本文介绍CSS 3部分新属性基础,包括RGBa、text-shadow、box-shadow、border-radius。这些属性通常用来增强网页布局和美誉度。(译者注:在支持CSS3的浏览器如Firefox、Safa2012-11-13IE下实现类似CSS3 text-shadow文字阴影的几种方法
IE9浏览器确实不支持CSS3 text-shadow属性,且根据最近的IE10 preview版的反馈,IE10浏览器也是不支持text-shadow属性的2011-05-11
最新评论