CSS3--文字阴影

原创 2017年01月03日 09:34:42

       CSS3设置文字阴影效果text-shadow样式,本来在CSS2版本中也有此属性,但在CSS3中文字阴影text-shadow再次被应用,丰富文字排版布局美化效果。在写网页的过程中,大标题可以采用颜色对比鲜明的"文字阴影"来使主题更突出。

      语法:text-shadow:x y blur color, …

      参数:
              x     横向偏移,即代表距离左多少距离开始显示阴影效果
              y     纵向偏移,即代表距离上多少距离开始显示阴影效果
              blur   模糊距离,即代表阴影范围大小

              color   阴影颜色

       这个属性可以给一个对象应用一组或多组阴影效果,方式如前面的语法显示一样,用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离,其值为正值时阴影向右偏移,如果其值为负值时,阴影向左偏移;Y-Offset是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移反之其值是负值时阴影向顶部偏移;Blur是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;Color是指阴影的颜色,其可以使用rgba色,可以使用颜色英文,也可以使用十六进制的颜色。

注意:

      1)文本阴影如果加很多层,会很卡很卡很卡,所以不建议添加很多层文本阴影。

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

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本阴影案例</title>
    <style>
        p{
            color: #000;
            font-size: 100px;
            font-weight: bold;
            text-shadow: 4px 4px 0px #75ffcd;
        }
    </style>

</head>
<body>
    <p>世上无难事,只怕有心人</p>
</body>
</html>
效果:


      下面是三个有意思的字体阴影效果,其实在网络上可以看到很多关于文字阴影的效果,可以学习下如何使用,用这个装饰还是比较平滑的效果,感觉还不错^^。

效果一:

     层叠效果,方式如前面的语法显示一样,只是多添加了几个修饰效果,中间用逗号隔开。


实现代码:

        p{
            color: #000;
            font-size: 100px;
            font-weight: bold;
            text-shadow:4px 4px 2px #f8ceff,  8px 8px 2px #8affbd;
        }
效果二:

      光晕效果,其实就是添加了模糊效果,在不同程度上的模糊添加不同的颜色就可以实现。


实现代码:

        p{
            color: #000;
            font-size: 100px;
            font-weight: bold;
            text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 
                        0 0 100px #ff00de, 0 0 150px #ff00de;
        }

效果三:

      火焰效果。


实现代码:

        p{
            color: #000;
            font-size: 100px;
            font-weight: bold;
            text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 
                         -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
            font-family:Verdana, Geneva, sans-serif;
        }









                
版权声明:本文为博主原创文章,如需要转载,请标明文章出处,谢谢。

HTML5基础加强css样式篇(文字阴影css属性:text-shadow)(四十四)

1.文字阴影: .box { margin: 100px 0 0 100px; width: 20...
  • u010853130
  • u010853130
  • 2017年04月07日 16:43
  • 686

Objective-C文字加阴影方法总结

Objective-C文字加阴影
  • liu1347508335
  • liu1347508335
  • 2016年07月26日 14:40
  • 8192

Swift 设置文字阴影

Swift 设置文字阴影其实很简单 我们一UILabel为例来看 let label1=UILabel(frame: CGRectMake(30, 50, 310,36)) ...
  • lwjok2007
  • lwjok2007
  • 2015年09月02日 18:45
  • 1414

css3文字阴影和盒子阴影

本来主要讲解了一下css3的一些知识。其中包括圆角,透明,文字,盒阴影等一些比较常用的内容,注意,css3只支持IE9和IE9以上的浏览器。...
  • tuzhiaichitang
  • tuzhiaichitang
  • 2017年08月03日 11:19
  • 389

浅谈CSS3新特性——文字阴影text-shadow、阴影box-shadow和倒影box-reflect

利用border属性: 以下三角为例,把左、右、下边框设置为toumse #triangle { width: 0; height: 0; border-...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月01日 12:00
  • 640

给UIButton里面的文本文字加shadow

UIButton *btnSend=[UIButton buttonWithType:UIButtonTypeCustom];     [btnSend setBackgroundColor:[...
  • yishengzhiai005
  • yishengzhiai005
  • 2016年09月21日 17:05
  • 417

svg基础--文字阴影的定制

svg系列–文字阴影的定制CSS3实现文字阴影css3实现文字阴影比较的方便,一个样式就能解决: text-shadow: 5px 5px 3px rgb(213,213,213); 由左往右:...
  • dai_qingyun
  • dai_qingyun
  • 2016年10月19日 10:14
  • 643

C#版可调节的文字阴影特效

        本来春节前不准备写BLOG文章了,可前几天有几个搞C#的朋友来信说,对文章《GDI+ 在Delphi程序的应用 -- 可调节的文字阴影特效》的内容很感兴趣,但苦于对Delphi不熟悉,...
  • maozefa
  • maozefa
  • 2008年01月15日 00:13
  • 7831

重要经验七---UITextView文字的阴影显示

很久没有更新blog了,
  • lvmaker
  • lvmaker
  • 2014年11月17日 23:54
  • 4066

canvas内的字体实现阴影效果

api介绍 可以通过几种全局context属性来控制阴影。 shadowColor任何CSS中的颜色值。可以使用透明度(alpha) ShadowOffsetX像素值。值为正数,向右移动阴影;值...
  • qq_30100043
  • qq_30100043
  • 2018年01月12日 16:52
  • 141
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3--文字阴影
举报原因:
原因补充:

(最多只允许输入30个字)