css3 box-shadow陰影圖文教程

來源:互聯網
上載者:User
這篇文章主要介紹了css3 box-shadow陰影(外陰影與外光暈),通過五個測試通過圖片展示了陰影的不同位置不同效果,需要的朋友可以參考下

基礎說明:

外陰影:box-shadow: X軸 Y軸 Rpx color;

屬性說明(順序依次對應): 陰影的X軸(可以使用負值) 陰影的Y軸(可以使用負值) 陰影模糊值(大小) 陰影的顏色

內陰影:box-shadow: X軸 Y軸 Rpx color inset;

預設是外陰影 內陰影:inset 可以設定成內部陰影

注(PS):此屬性使用於盒模型 如(p,p,h1,h2,h3,h4,h5,h6等) 不是用來設定文字陰影 如果設定文字陰影請參考知識點:text-shadow(同理)

因為是新屬性,為了相容各主流瀏覽器並支援這些主瀏覽器的較低版本,基於主流瀏覽器上使用box-shadow屬性時,我們需要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式,歐朋瀏覽器 -o-box-shadow IE>9 -ms-box-shadow

基礎練習:

為了更好的瞭解box-shadow的特徵,做幾個小測試:(為了方便直接在標籤內嵌套樣式)

測試1: <p style="box-shadow: 0 0 10px #f00; border:1px solid green"></p> box-shadow: 0 0 10px #f00 (因沒有使其X軸與Y軸移動 設定值 所在會在本身發生作用 半徑範圍,顏色)

測試2: <p style="box-shadow:4px 4px 10px #f00; border:1px solid green"></p> box-shadow:4px 4px 10px #f00;與測試1不同 X軸與Y軸改變了正值(正值 向右 向下) 所以變成了這樣

測試3:<p style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></p> box-shadow:-4px -4px 10px #f00;與測試2不同 之處是 X軸與Y軸改變成了負值(負值 向左 向上) 所以變成了這樣

同理:你可以測試下一正值,一負值的效果,這裡就不做測試了。。。。。。。。

測試4:<p style="box-shadow:-10px 0px 10px red, /*左邊陰影*/
0px -10px 10px #000, /*上邊陰影*/
10px 0px 10px green, /*右邊陰影*/
0px 10px 10px blue;" /*下邊陰影*/
</p>

你看到這樣的代碼會感覺很亂 但是看到片之後你就能明白這是怎麼做的了無非改一下X軸與Y軸位置與顏色值 還有陰影值大小,(用逗號隔開)多練習幾次就好

測試5:--內陰影 <p style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></p> box-shadow: 0px 0px 10px red inset; 與上面寫法相同 唯一不同的是添加了一個inset 其它屬性與外陰影相同

百變不離其宗,練習就能熟悉,懂了就知道原理,隨意改寫,在配合css3的動畫效果, 閃光層(字)都很簡單實現。。希望對你有協助。。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.