text-shadow的用法详解

Posted 江山如画

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text-shadow的用法详解相关的知识,希望对你有一定的参考价值。

1.兼容性:text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。

2.text-shadow:5px 5px 5px #fff;

      x轴 (可正可负) y轴(可正可负) 模糊距离(正值)  阴影颜色

注意,正值使阴影往右/下移动,负值往左/上移动

  阴影的颜色是可选的,如果颜色没填,就使用从父级继承的颜色。然而,在不同的浏览器下可能会有所不同。

 效果一:外发光

html

<div class="text1">
    <span class="son son1">1.外发光</span> <br /> text-shadow:0 0 20px #f00;
</div>    

CSS:

.text1{
     font-family: helvetica;
    padding:50px 0px;
    color:#00f;text-align:center;
    background:#000;
    }
.son{
        font-size: 120px;
        color:#000;
        font-weight: bold;
    }
    .son1{
    /*外发光        */
        text-shadow:0 0 20px #f00;
    }

效果:

效果二:辉光

CSS:

.son2{
		/*辉光效果*/
		text-shadow:0 0 20px #fff,0 0 40px #ca8eff,0 0 60px #6f00d2;

	}

 

效果三:投影

 

.son3{
        /*投影*/
        text-shadow:0 2px 2px #999;
    }
View Code

效果四:浮雕

.son4{
        /*浮雕*/
        color:#eee;
        text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
    }
View Code

效果五:模糊

.son5{
        /*模糊xiaoguo*/
        color: transparent;
        text-shadow:0 0 8px #ffaad5;
    }
View Code

效果六:模糊加浮雕

    .son6{
        /*6.模糊加浮雕*/
        /*color:#ff95ca;*/
        color: transparent;
        text-shadow:0 0 8px #ffc1e0, -1px -1px 0 #eee, 1px -1px #666;
    }
View Code

效果七:影子

.son7{
        /*7.影子*/
        color:#9d9d9d;
          text-shadow: 1px 1px 0 #adadad;
    }
View Code

效果八:描边

.son8{
        /*8.描边*/
        text-shadow: 2px 2px 0 #9f4d95,-2px 2px 0 #9f4d95,2px -2px 0 #9f4d95,-2px -2px 0 #9f4d95;
    }
View Code

效果九:3D效果

 

.son9{
        /*9.3D效果上*/
         color: #fff;
          text-shadow: 2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
    }
View Code

   效果十:3D效果

.son10{
        /*10.3D效果下*/
        color:#fff;
        text-shadow: -2px -2px #ddd,-3px -3px #ddd,-4px -4px #ddd,-5px -5px #ddd;
    }
View Code

效果十一:D效果

.son11{
        /*11.3D效果*/
          color: #eee;
          text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
        }
View Code

效果十二:文字补色

.son12{
         color: rgba(255, 179, 140,0.5);
          text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
    }
View Code

 

效果十三:火火火

.son13{
        /*火火*/
         text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3, -2px -15px 11px #f80,
                        2px -25px 18px #f20;
    }
View Code

 总结:代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上机练习</title>
<style type="text/css">
    .text1{
     font-family: helvetica;
    padding:50px 0px;
    color:#00f;text-align:center;
    background:#000;
    }
    .text2{
        background: #333;
    }
    .text3{
        background: #ccc;
    }
    .text4{
        background:#5b5b5b;    
    }
    .son{
        font-size: 120px;
        color:#000;
        font-weight: bold;
    }
    .son1{
    /*外发光        */
        text-shadow:0 0 20px #f00;
    }
    .son2{
        /*辉光效果*/
        text-shadow:0 0 20px #fff,0 0 40px #ca8eff,0 0 60px #6f00d2;

    }
    .son3{
        /*投影*/
        text-shadow:0 2px 2px #999;
    }
    .son4{
        /*浮雕*/
        color:#eee;
        text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
    }
    .son5{
        /*模糊xiaoguo*/
        color: transparent;
        text-shadow:0 0 8px #ffaad5;
    }
    .son6{
        /*6.模糊加浮雕*/
        /*color:#ff95ca;*/
        color: transparent;
        text-shadow:0 0 8px #ffc1e0, -1px -1px 0 #eee, 1px -1px #666;
    }
    .son7{
        /*7.影子*/
        color:#9d9d9d;
          text-shadow: 1px 1px 0 #adadad;
    }
    .son8{
        /*8.描边*/
        text-shadow: 2px 2px 0 #9f4d95,-2px 2px 0 #9f4d95,2px -2px 0 #9f4d95,-2px -2px 0 #9f4d95;
    }
    .son9{
        /*9.3D效果上*/
         color: #fff;
          text-shadow: 2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
    }
    .son10{
        /*10.3D效果下*/
        color:#fff;
        text-shadow: -2px -2px #ddd,-3px -3px #ddd,-4px -4px #ddd,-5px -5px #ddd;
    }
    .son11{
        /*11.3D效果*/
          color: #eee;
          text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
        }
    .son12{
         color: rgba(255, 179, 140,0.5);
          text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
    }
    .son13{
        /*火火*/
         text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3, -2px -15px 11px #f80,
                        2px -25px 18px #f20;
    }
</style>
</head>
<body>
<div class="text1">
    <span class="son son1">1.外发光</span> <br />text-shadow:0 0 20px #f00;
</div>
<div class="text1">
    <span class="son son2">2.辉光效果</span> <br />text-shadow:0 0 20px #fff,0 0 40px #ca8eff,0 0 60px #6f00d2;
</div>
<div class="text1 text2">
    <span class="son son3">3.投影</span> <br />text-shadow:0 2px 2px #333;
</div>
<div class="text1 text3">
    <span class="son son4">4.浮雕</span> <br />
    text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
</div>
<div class="text1">
    <span class="son son5">5.模糊xiaoguo</span> <br />text-shadow:0 0 8px #ffaad5;
<div class="text1 text3">
    <span class="son son6">6.模糊加浮雕</span> <br />text-shadow:0 0 8px #ffc1e0, -1px -1px 0 #eee, 1px -1px #666;
</div>
<div class="text1 text4">
    <span class="son son7">7.影子xiao</span> <br />text-shadow: 1px 1px 0 #adadad;
</div>
<div class="text1">
    <span class="son son8">8.描边XIAOS</span> <br />text-shadow: 2px 2px 0 #9f4d95,-2px 2px 0 #9f4d95,2px -2px 0 #9f4d95,-2px -2px 0 #9f4d95;
</div>
<div class="text1">
    <span class="son son9">9.3D效果上</span> <br /> text-shadow: 2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
</div>
<div class="text1">
    <span class="son son10">10.3D效果下</span> <br />text-shadow: -2px -2px #ddd,-3px -3px #ddd,-4px -4px #ddd,-5px -5px #ddd;
</div>
<div class="text1">
    <span class="son son11">11.3D效果</span> <br />  text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
</div>
<div class="text1">
    <span class="son son12">12.文字补色3D</span> <br />color: rgba(255, 179, 140,0.5);
          text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
</div>
<div class="text1">
    <span class="son son13">13.text火火火</span>  <br />text-shadow: 0 0 4px white,
                      0 -5px 4px #ff3,
                      2px -10px 6px #fd3, 
                       -2px -15px 11px #f80,
                        2px -25px 18px #f20;
</div>
</body>
</html>
View Code

 

以上是关于text-shadow的用法详解的主要内容,如果未能解决你的问题,请参考以下文章

c_cpp 加载源图像固定用法(代码片段,不全)

SQL Select 语句的用法

(转) Java中的负数及基本类型的转型详解

详解Android WebView加载html片段

Css文字特效之text-shadow特效

css文本效果