css字體投影

最近在整理學習CSS3的一些小知識，現在已經整理了CSS3選擇器，CSS3圓角和CSS3元素陰影屬性的使用方法了。今天為大家整理一下CSS3中的文字陰影——text-shadow的使用方法。希望能對大家有所幫助吧。

　　在CSS3沒有問世之前，處理文字陰影的方法，基本上都是圖片。直到CSS3的出現，讓我們制作文字陰影的方法又有了進一步的提高。其實文字陰影——text-shadow在CSS2里面出現過，但是在CSS2.0又沒無情的拋棄了，現在CSS3中又讓使用了，這說明文字陰影——text-shadow還是值得咱們重視的。所以作為一名合格的前端人員，掌握文字陰影那必須是當務之急了。

 

　一、text-shadow語法

 

　　1、語法：

　　對象選擇器 {text-shadow:X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影顏色}

　　注：text-shadow可以使用一個或多個投影，如果使用多個投影時必須需要用逗號“,”分開。

 

　　2、取值：

　　box-shadow屬性最多可以有6個參數設置，他們分別取值：

　　(1)陰影水平偏移量：是指陰影水平偏移量其值可以是正負值可以取正負值，如果值為正值，則陰影在對象的右邊，反之其值為負值時，陰影在對象的左邊;

　　(2)陰影的垂直偏移量：是指陰影的垂直偏移量，其值也可以是正負值，如果為正值，陰影在對象的底部，反之其值為負值時，陰影在對象的頂部;

　　(3)陰影模糊半徑：此參數是可選，但其值只能是為正值。如果值越大，陰影越模糊，反之陰影越清晰。如果其值為0時，表示陰影不具有模糊效果。

　　(4)陰影顏色：此參數可選，如果不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不一樣，特別是在webkit內核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。

 

　　二、text-shadow的兼容方法

 

　　1、text-shadow的各瀏覽器前綴

　　(1)Firefox4.0-

　　-moz-text-shadow: X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影顏色;

　　(2)Safari and Google chrome10.0-

　　-webkit-text-shadow: X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影顏色;

　　(3)Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9

　　text-shadow: X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影顏色;

 

　　2、text-shadow兼容IE6-8

　　

E {filter:shadow(Color=顏色值,Direction=數值,Strength=數值)}

 

 

　　其中E是元素選擇器，Color用於設定對象的陰影色;Direction用於設定投影的主向，取值為0即零度(表示向上方向)，45為右上，90為右，135為右下，180為下方，225為左下方，270為左方，315為左上方;Strength就是強度，類似於text-shadow中的blur值。

 

　　三、text-shadow的實例(由於時間關系，請用谷歌瀏覽器查看)

 

　　1、例子1——熟悉文字陰影

 

　　CSS代碼：

 

<span style=""><span style="">.demo {
    background: #666666;
    width: 224px;
    padding: 30px;
    font: bold 55px/100% "Lucida Sans";
    color: #fff;
    text-transform: uppercase;
    text-shadow: red 0 2px 0;
}</span></span>

 

 

　　HTML代碼：

 

<span style=""><span style=""><div class="demo">夢龍小站</div></span></span>

 

 

　　預覽效果：

 

 

　　2、例子2——改變陰影模糊半徑

 

　　CSS代碼：

 

<span style=""><span style="">.demo {
    background: #666666;
    width: 224px;
    padding: 30px;
    font: bold 55px/100% "Lucida Sans";
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 20px red;
}</span></span>

 

 

　　HTML代碼：

 

<span style=""><span style=""><div class="demo">夢龍小站</div></span></span>

 

 

　　預覽效果：

 

 

　　3、例子3——輝光效果

 

　　CSS代碼：

 

<span style=""><span style="">.demo {
    background: #666666;
    width: 224px;
    padding: 30px;
    font: bold 55px/100% "Lucida Sans";
    color: #fff;
    text-transform: uppercase;
    text-shadow:0 0 5px #fff,
                0 0 10px #fff,
                0 0 15px #fff,
                0 0 40px #ff00de,
                0 0 70px #ff00de;
}</span></span>

 

 

　　HTML代碼：

 

<span style=""><span style=""><div class="demo">夢龍小站</div></span></span>

 

 

　　預覽效果：

 

 

　　4、例子4——浮雕效果

 

　　CSS代碼：

 

<span style=""><span style="">.demo {
    background: #666666;
    width: 224px;
    padding: 30px;
    font: bold 55px/100% "Lucida Sans";
    color: #ccc;
    text-transform: uppercase;
    text-shadow: 0 1px 1px red;
}</span></span>

 

 

　　HTML代碼：

 

<span style=""><span style=""><div class="demo">夢龍小站</div></span></span>

 

 

　　預覽效果：

 

 

　　5、例子5——模糊效果

 

　　CSS代碼：

 

<span style=""><span style="">.demo {
    background: #666666;
    width: 224px;
    padding: 30px;
    font: bold 55px/100% "Lucida Sans";
    text-transform: uppercase;
    color: transparent;
    text-shadow: 0 0 5px #fff;
}</span></span>

 

 

　　HTML代碼：

 

<span style=""><span style=""><div class="demo">夢龍小站</div></span></span>

 

 

　　預覽效果：

 

 

　　6、例子6——模糊的浮雕效果

 

　　CSS代碼：

 

<span style=""><span style="">.demo {
    background: #666666;
    width: 224px;
    padding: 30px;
    font: bold 55px/100% "Lucida Sans";
    text-transform: uppercase;
    color: transparent;
    text-shadow:0 0 6px blue,
                -1px -1px  #FFF,
                1px -1px  #444;
}</span></span>

 

 

　　HTML代碼：

 

<span style=""><span style=""><div class="demo">夢龍小站</div></span></span>

 

 

　　預覽效果：

 

 

　　7、例子7——文本的影子效果

 

　　這種效果需要注意：文字的前景色要比背景色暗，陰影顏色稍比背景色亮一點點，如果陰影色太亮看起來會怪，如果太暗將沒有效果顯示。

 

　　CSS代碼：

 

<span style=""><span style="">.demo {
    width: 224px;
    padding: 30px;
    font: bold 55px/100% "Lucida Sans";
    text-transform: uppercase;
    color: #566F89;
    background: #C5DFF8;
    text-shadow: 1px 1px 0 #E4F1FF;
}</span></span>

 

 

　　HTML代碼：

 

<span style=""><span style=""><div class="demo">夢龍小站</div></span></span>

 

 

　　預覽效果：

 

　　8、例子8——環繞陰影效果

 

　　CSS代碼：

 

.demo {
    background: #ccc;
    width: 224px;
    padding: 30px;
    font: bold 55px/100% "Lucida Sans";
    text-transform: uppercase;
    color: #fff;
    text-shadow: 1px 1px 0 #f96,
                     -1px -1px 0 #f96;
}

 

 

　　HTML代碼：

 

<div class="demo">夢龍小站</div>

 

 

　　預覽效果：

 

　　9、例子9——3D效果

 

　　CSS代碼：

 

.demo {
    background: #ccc;
    width: 224px;
    padding: 30px;
    font: bold 55px/100% "Lucida Sans";
    text-transform: uppercase;
    color: #fff;
    text-shadow:1px 1px #d7e8f9,
                2px 2px #d7e8f9,
                3px 3px #d7e8f9,
                4px 4px #d7e8f9,
                5px 5px #d7e8f9,
                6px 6px #d7e8f9;
}

 

 

　　HTML代碼：

 

<div class="demo">夢龍小站</div>

 

 

　　預覽效果：

 

 

　　10、例子10——復古的文字效果

 

　　CSS代碼：

 

.demo {
    background: #ccc;
    width: 224px;
    padding: 30px;
    font: bold 55px/100% "Lucida Sans";
    text-transform: uppercase;
    color: #eee;
    text-shadow:3px 3px 0 #ccc,
                5px 5px 0 #eee;
}

 

 

　　HTML代碼：

 

<div class="demo">夢龍小站</div>

 

 

　　預覽效果：

 

 

　　11、例子11——文字陰影IE版

 

　　CSS代碼：

 

div {filter:shadow(Color=#000000,Direction=45,Strength=5);
font:40px/60px "宋體";height:60px;}

 

 

　　HTML代碼：

 

<div>夢龍小站</div>

 

 

　　預覽效果：

 

　　上面一共羅列了11個不同的小效果，這么炫酷的效果都是用CSS3中的文字陰影——text-shadow實現的，沒有用到一張圖片喲。從現在開始慢慢接觸着這些新興技術，讓自己的代碼與時俱進，一直是我的座右銘喲，在這里與大家共勉。CSS3文字陰影——text-shadow就為大家介紹到這里，希望能對大家有所幫助。