CSS text-shadow屬性

2024-07-11 08:44:54

字體：大中小

來源：轉載

供稿：網友

最近我因為要安裝 Firebug 1.4 導致我不得不安裝了 Firefox 3.5 ,所以很不小心地接觸到了Wordpress后臺那漂亮的文字陰影.也就是CSS中的text-shadow屬性.所以今天我整理了一些資料,希望可以對大家有所啟發.

首先我們看看wordpress 2.8后臺使用了text-shadow的部分(綠色箭頭).覺得怎么樣?沒錯,這些都是CSS3屬性,而不是圖片做成的.

CSS text-shadow屬性

text-shadow是什么?

text-shadow早在CSS2中已經存在,而現在CSS3也準備將他加入其中.并且由于一直以來只有Safari支持這個屬性所以我們很少見到真正的應用,直到最近Firefox 3.5對它的支持然重新喚起了人們對它的興趣.

text-shadow可以支持給文字加上陰影,這樣我們在設計時可以利用css3屬性增加文字的質感而不用使用任何圖片.
目前支持的瀏覽器有Firefox 3.1+,Safari 3+,Opera 9.5+等現代瀏覽器(數據可能有偏差).當然IE家族是無法支持的.

接下來看看text-shadow的語法:

text-shadow:color length length length;

color:顏色; length分別按順序指“X軸方向長度 Y軸方向長度陰影模糊半徑”
正值在X軸表示向右,負值表示向左.同樣的道理Y軸負值是表示向上.其中任意一個值可以為零也可為空(將做默認處理)

舉個例子:

text-shadow: -1px 2px 3px #ffb69a;

表示X軸方向陰影向左1px,Y軸方向陰影向下2px,而陰影模糊半徑3px,顏色為 #ffb69a

一些試驗與demo

我做了點小小的試驗,做成了一個 Demo頁面 .為了讓瀏覽器不支持text-shadow的用戶看到陰影效果,請直接看以下截圖(有位朋友說那個”火鳥”看起來像”雞”):

CSS text-shadow屬性

如果你使用的是Firefox 3.1+,Safari等瀏覽器可以看下么的演示代碼

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <style type=text/css>body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;} a{text-decoration:none;} ol,ul {list-style: none;} table {border-collapse: collapse;border-spacing:0;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;} img{border:none;} .clearfix:after {content:"/0020";display:block;height:0;clear:both;} .clearfix{zoom:1;} body{font-family:"微軟雅黑","宋體",Geneva, sans-serif; font-size:12px;background:#ebebeb;} /**-------------- CSS --------------**/ #wrapper{ margin:30px 0 30px 150px; } #wrapper #showCss{ background:#48A890; width:60px; height:25px; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; line-height:25px; cursor:pointer; text-align:center; margin-bottom:20px; } #wrapper .code{ margin:8px 0 10px 52px; } #wrapper code{ font-family:Consolas,"Bitstream Vera Sans Mono",monospace,"Courier New"; background:#f3ffae; padding:5px; color:#333; } #wrapper h2{ font-size:35px; font-weight:bold; } #wrapper h1{ font-size:20px; color:#48A890; font-family:Georgia; font-style:italic; margin-bottom:30px; text-shadow: 0 1px #fff; } #wrapper span a{ font-size:12px; margin-left:20px; text-decoration:underline; color:#000; letter-spacing:1px; } h2#test1{ text-shadow: 1px 1px #40730e; color:#92bf30; } h2#test2{ text-shadow: 1px 1px 3px #000; color:#676767; } h2#test3{ text-shadow: 0px -1px #bbb,0 1px #fff; color:#e3e1e1; } h2#test4{ text-shadow: -1px -1px 3px #ffb69a,1px 1px 3px #922e09,-1px -1px #ffb69a,1px 1px #922e09; color:#e73f00; } h2#test5{ margin-top:40px; text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, 2px -15px 11px #FF8800, 2px -25px 18px #FF2200; color:#000; }</style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){  $('.code').css('display','none');  $('#showCss').click(function(){   $('.code').slideToggle(500);   $(this).text($(this).text() == '顯示CSS' ? '隱藏CSS':'顯示CSS');   return false;   });  }); </script></head><body> <div id="wrapper"> <h1>Text Shadow Use CSS<span><a >ediyang.com</a></span></h1> <div id="showCss">顯示CSS</div>  <h2 id="test1">1 : This is heading with text-shadow 中文標題</h2>  <div class="code">   <code>    text-shadow: 1px 1px #40730e;    color:#92bf30;   </code>  </div>  <h2 id="test2">2 : This is heading with text-shadow 中文標題</h2>  <div class="code">   <code>     text-shadow: 1px 1px  3px #000;     color:#676767;        </code>  </div>  <h2 id="test3">3 : This is heading with text-shadow 中文標題</h2>  <div class="code">    <code>        text-shadow: 0px -1px  #bbb,0 1px #fff;    color:#e3e1e1;        </code>  </div>  <h2 id="test4">4 : This is heading with text-shadow 中文標題</h2>  <div class="code">   <code>text-shadow: -1px -1px 3px #ffb69a,1px 1px 3px #922e09,-1px -1px #ffb69a,1px 1px #922e09; color:#e73f00;   </code>  </div>  <h2 id="test5">5 : 燃燒吧!火雞</h2>  <div class="code">   <code>text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, 2px -15px 11px #FF8800, 2px -25px 18px #FF2200; color:#000;   </code>  </div> </div></body></html>

提示：您可以先修改部分代碼再運行

為什么使用text-shadow：