CSS3利用text-shadow屬性實現多種效果的文字樣式展現

一、效過圖展示：

已經是比較久之前學習的文字效果了。但還是很實用很有趣的。利用CSS3提供的text-shadow屬性可以為頁面上的文字添加陰影效果，因此可以替換掉之前使用過的一些繁瑣的圖片。到目前為止Safari、FireFox、Chrome和Opera等主流瀏覽器都支援此功能。

二、介紹CSS3的 text-shadow屬性

text-shadow屬性可以為頁面上的文字加上陰影效果，基本語法如下:

text-shadow:none|none|[,]*

text-shadow:none|[,]*

text-shadow屬性的初始值為無，適用於所有元素。

color：表示顏色

length：表示由浮點數字和單位標識符組成的長度值，可以為負值，指定陰影的水平延伸距離。

上面的基本文法如果不理解的，請看下面這個範例

<span style="color: #800000;"><style type="text/css">
    p</span>{<span style="color: #ff0000;">
        text-shadow</span>:<span style="color: #0000ff;">0.1em 0.1em 0.3em #333333</span>;
    }<span style="color: #800000;">
</style></span>

text-shadow屬性的第一個值表示水平位移，第二個值表示垂直位移，正值為偏右或偏下，負值為偏左或偏上，第三個值表示模糊半徑（該值可選），第四個值表示陰影的顏色（該值可選），這個顏色值可以放在陰影效果的長度值值之前或之後。如果沒有指定顏色，那麼將使用color屬性值來替代。

text-shadow屬性可以接受一個以逗號分割的陰影效果列表，並應用到該元素的文字上。陰影效果按照給定的順序應用，因此有可能出現互相覆蓋，但是不會覆蓋文字本身。陰影效果不會改變邊框的尺寸，但可能會延伸到它的邊界值外。 （你可以試著把本例中p標籤的padding樣式刪去，就會發現火焰效果文字的陰影超出了邊界）。

 

三、文字陰影效果代碼如下

主要利用就是text-shadow的陰影列表，加上使用合理的顏色搭配，就可以達到我們期望的效果了。

<span style="color: #800000;"><style type="text/css">
        p</span>{<span style="color: #ff0000;">
            font-size</span>:<span style="color: #0000ff;">5em</span>;<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;">5px</span>;<span style="color: #ff0000;">
            padding</span>:<span style="color: #0000ff;">20px</span>;<span style="color: #ff0000;">
            display</span>:<span style="color: #0000ff;"> inline-block</span>;
        }<span style="color: #800000;">
        .p1</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> 0.2em 0.5em 0.1em #600,-0.3em 0.1em 0.1em #060,0.4em -0.3em 0.1em #006</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">red</span>;
        }<span style="color: #800000;">
        .p2</span>{<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;">black</span>;<span style="color: #ff0000;">
            text-align</span>:<span style="color: #0000ff;">left</span>;<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">red</span>;
        }<span style="color: #800000;">
        .p3</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> -1px -1px white,1px 1px #333</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">#D1D1D1</span>;<span style="color: #ff0000;">
            font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #CCC</span>;
        }<span style="color: #800000;">
        .p4</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> 1px 1px white,-1px -1px #333</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">#D1D1D1</span>;<span style="color: #ff0000;">
            font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #CCC</span>;
        }<span style="color: #800000;">
        .p5</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> -1px 0 black,0 1px black,1px 0 black,0 -1px black</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">#ffffff</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #CCC</span>;
        }<span style="color: #800000;">
        .p6</span>{<span style="color: #ff0000;">
            text-shadow</span>:<span style="color: #0000ff;"> 0 0 0.2em #F87,0 0 0.2em #f87</span>;<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">#d1d1d1</span>;<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> #CCC</span>;
        }<span style="color: #800000;">
    </style></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p1"</span><span style="color: #0000ff;">></span>多色阴影效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p2"</span><span style="color: #0000ff;">></span>火焰效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p3"</span><span style="color: #0000ff;">></span>立体凸起效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p4"</span><span style="color: #0000ff;">></span>立体凹下效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p5"</span><span style="color: #0000ff;">></span>描边效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p6"</span><span style="color: #0000ff;">></span>外发光效果<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

合理使用text-shadow屬性幫助我們實現一些較簡單的特殊文字效果，可以省去頁面載入部分繁複的靜態圖片資源。

最後，感謝閱讀。