text-shadow的用法詳解

時間 2019-11-12

標籤 text shadow 用法詳解欄目 HTML 简体版

原文原文鏈接

1.兼容性：text-shadow 和 box-shadow 這兩個屬性在主流現代瀏覽器上獲得了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。css

2.text-shadow：5px 5px 5px #fff;html

　　　　　　x軸（可正可負） y軸（可正可負）模糊距離（正值）陰影顏色瀏覽器

注意，正值使陰影往右/下移動，負值往左/上移動ide

　　陰影的顏色是可選的，若是顏色沒填，就使用從父級繼承的顏色。然而，在不一樣的瀏覽器下可能會有所不一樣。ui

效果一：外發光spa

html：3d

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

CSS：code

.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;
    }

效果：htm

效果二：輝光blog

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>