首頁 > 文章 > web前端 > CSS3之box-shadow屬性使用以及單邊陰影效果設置

CSS3之box-shadow屬性使用以及單邊陰影效果設置

黄舟原創: 2017-07-21 14:09:453995瀏覽

3.5.2　box-shadow屬性使用方法（1）

#和PSD軟體製作圖片相比，box-shadow修改元素的陰影效果要方便得多，因為box-shadow可以修改六個參數，得到不同的效果。以下結合一些簡單的案例來對box-shadow屬性進行示範說明。

1．單邊陰影效果

定義元素的單邊陰影效果和調諧border的單邊邊框顏色是相似的，例如：

> 
<html lang="en-US"> 
<head> 
  <meta charset="UTF-8"> 
  <title>box-shadow设置单边阴影效果title> 
  <style type="text/css"> 
    .box-shadow {  
      width: 200px;  
      height: 100px;  
      border-radius: 5px;  
      border: 1px solid #ccc;  
      margin: 20px;  
    }  
    .top {  
      box-shadow: 0 -2px 0 red;  
    }  
    .right {  
      box-shadow: 2px 0 0 green;  
    }  
    .bottom {  
      box-shadow: 0 2px 0 blue;  
    }  
    .left {  
      box-shadow: -2px 0 0 orange;  
    }  
  style> 
head> 
<body> 
  <p class="box-shadow top">p> 
  <p class="box-shadow right">p> 
  <p class="box-shadow bottom">p> 
  <p class="box-shadow left">p> 
body> 
html>

效果如圖3-38所示。

這個案例中，使用box-shadow為元素設定了頂邊、右邊、底邊和左邊的單邊陰影效果。主要透過box-shadow的水平和垂直陰影的偏移量來實現，當x-offset為正值時，產生右邊陰影，反之為負值時，生成左邊陰影；y-offset為正值時，生成底部陰影，反之為負值時產生頂部陰影。此例中是一個單邊實影投影效果（陰影模糊半徑為0），但是如果陰影的模糊半徑不是0，上面的方法還能不能實現單邊陰影效果呢？不急著來回答，在上面的實例中加入一個模糊半徑，例如：

.top {  
      box-shadow: 0 -2px 5px red;  
    }  
    .right {  
      box-shadow: 2px 0 5px green;  
    }  
    .bottom {  
      box-shadow: 0 2px 5px blue;  
    }  
    .left {  
      box-shadow: -2px 0 5px orange;  
    }

圖3-39說明，這個效果並不是理想的單邊陰影效果，當box-shadow添加了5px陰影模糊半徑後，陰影不再是實影投影，陰影清晰度向外擴散，更具陰影的效果。但造成了另一個問題，給元素其他三邊加上淡淡的陰影效果，但這並不是設計所需的效果。

那究竟要怎麼做呢？此時，box-shadow屬性中的陰影擴展半徑（spread-radius）會是一個很關鍵的屬性，要實現單邊陰影效果，必須配上這個屬性（除單邊實影之外）。

.top {  
      box-shadow: 0 -4px 5px -3px red;  
    }  
    .right {  
      box-shadow: 4px 0 5px -3px green;  
    }  
    .bottom {  
      box-shadow: 0 4px 5px -3px blue;  
    }  
    .left {  
      box-shadow: -4px 0 5px -3px orange;  
    }

上面的程式碼調整了陰影的位移量，新增了box-shadow的擴充半徑，

以上是CSS3之box-shadow屬性使用以及單邊陰影效果設置的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何利用CSS實現曲面陰影效果的範例程式碼分享下一篇：如何利用CSS實現曲面陰影效果的範例程式碼分享

看更多