CSS3實戰1-文本屬性text-shadow的用法

text-shadow 定義文本陰影或模糊效果。text-shadow屬性在css2中已經定義了，可是在css3中又從新定義了，而且增長了不透明度的效果。

基本語法

text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?

• 默認值：無

• 適用於：全部元素

• 動畫性：是，除了內、外陰影切換時

• 計算值：指定值

取值：

• none： 無陰影

• <length>①： 第1個長度值用來設置對象的陰影水平偏移值。能夠爲負值

• <length>②： 第2個長度值用來設置對象的陰影垂直偏移值。能夠爲負值

• <length>③： 若是提供了第3個長度值則用來設置對象的陰影模糊值。不容許負值

• <length>④： 若是提供了第4個長度值則用來設置對象的陰影外延值。能夠爲負值

• <color>： 設置對象的陰影的顏色。

• inset： 設置對象的陰影類型爲內陰影。該值爲空時，則對象的陰影類型爲外陰影

Demo和Demo源碼

Demo地址：http://weber.pub/demo/160925/text-shadow.html

Demo源碼：http://pan.baidu.com/s/1sl0A5pr 密碼：a0qh

解釋

先上代碼

<style>
    p{
        font-size: 50px;
        font-weight: 900;
    }
    .p1{
        text-shadow: 3px 3px red;
    }
    .p2{
        text-shadow: 3px 3px 5px red;
    }
</style>

<p class="p1">weber.pub</p>
<p class="p2">weber.pub</p>

從上面的例子中能夠看出 text-shadow 屬性的第一個值表示水平位移，第二個表示垂直位移，第三個表示模糊半徑（可選），第四個表示陰影顏色（可選）

實例

• 一、複雜文本特效

實現一個文本的多重陰影效果

<style>
.p3{
    text-shadow: 3px 3px 5px #17bebb,
    15px 15px 5px #a8be11,
    27px 27px 5px #be1411;
}
</style>
<p class="p3">weber.pub</p>

效果圖以下

• 二、靜態火焰效果

根據不一樣的偏離值模糊程度，再加上咱們設定合適的顏色值，就能夠利用 text-shadow 來作出相似火焰的效果。

<style>
.p4{
    background: #000000;
    text-shadow: 0 0 5px #fff,
    0 -5px 4px #ff3,
    2px -10px 6px #fd3,
    -2px -15px 11px #f80,
    2px -25px 18px #f20;
}
</style>
<p class="p4">weber.pub</p>

• 三、會動的火焰效果

根據css3的動畫而後讓text-shadow屬性變化來實現的效果（css樣式只展現在 chrome 瀏覽器的，兼容其餘瀏覽器的css樣式，可下載源碼）

<style>
.p5{
    background: #000000;
    text-shadow: 0 0 5px #fff,
    0 -5px 4px #ff3,
    2px -10px 6px #fd3,
    -2px -15px 11px #f80,
    2px -25px 18px #f20;
    animation: ts 3s;
    -moz-animation: ts 3s;
    -webkit-animation: ts 3s;
    -o-animation: ts 3s;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes ts{
    0% {
        text-shadow: 0 0 5px #fff,
        0 -5px 4px #ff3,
        2px -10px 6px #fd3,
        -2px -15px 11px #f80,
        2px -25px 18px #f20;
    }
    40% {
        text-shadow: 0 0 5px #fff,
        0 -8px 8px #ff3,
        2px -15px 10px #fd3,
        -4px -20px 15px #f80,
        2px -30px 22px #f20;
    }
    50% {
        text-shadow: 0 0 5px #fff,
        0 -8px 8px #ff3,
        4px -15px 10px #fd3,
        -2px -20px 15px #f80,
        4px -30px 22px #f20;
    }
    60% {
        text-shadow: 0 0 5px #fff,
        0 -8px 8px #ff3,
        -2px -15px 10px #fd3,
        -2px -20px 15px #f80,
        -2px -30px 22px #f20;
    }
    100% {
        text-shadow: 0 0 5px #fff,
        0 -5px 4px #ff3,
        2px -10px 6px #fd3,
        -2px -15px 11px #f80,
        2px -25px 18px #f20;
    }
}
<style>
<p class="p5">weber.pub</p>

暫時沒有找到好用的能夠製做gif圖片的工具，因此就沒有圖片了，求推薦。。。

• 四、凸出立體文本效果

經過在文本的左上角和右下角各添加一個像素的錯位補色陰影，能夠實現一種立體效果。

<style>
.p6{
    color: #17bebb;
    background: #17bebb;
    text-shadow: -1px -1px #fff,
    1px 1px #333;
}
</style>
<p class="p6">weber.pub</p>

• 五、內凹立體文本效果

和上面的案例原理相同

<style>
.p7{
    color: #ccc;
    background: #ccc;
    text-shadow: 1px 1px #fff,
    -1px -1px #333;
}
</style>
<p class="p7">weber.pub</p>

• 六、文本描邊效果

分別對文本的4個邊添加1像素的實體陰影

<style>
.p8{
    color:#fff;
    text-shadow: -1px 0 #17bebb,
    0 1px #17bebb,
    1px 0 #17bebb,
    0 -1px #17bebb;
}
</style>
<p class="p8">weber.pub</p>

• 七、文本外發光效果

<style>
.p9{
    text-shadow: 0 0 5px red,
    0 0 5px #291717;
}
</style>
<p class="p9">weber.pub</p>

by web開發者 from http://weber.pub/

本文地址： http://weber.pub/css3實戰1-文本屬性text-shadow的用法/220.html