CSS3中box-shadow屬性如何制作邊框陰影效果

發(fā)布時(shí)間：2021-08-26 15:12:26 來源：億速云閱讀：136 作者：小新欄目：web開發(fā)

小編給大家分享一下CSS3中box-shadow屬性如何制作邊框陰影效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

效果演示：
CSS3中box-shadow屬性如何制作邊框陰影效果

box-shadow向框添加一個(gè)或多個(gè)陰影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。
語法：
代碼如下:

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow,v-shadow必須。水平，垂直陰影的位置。允許賦值。blur可選，模糊距離。spread可選，陰影的尺寸。color可選，陰影的顏色。inset可選，將外部陰影（outset）改為內(nèi)部陰影。
來看幾個(gè)簡(jiǎn)單的范例：

<body>  
 <div class="box">  
  <span class="caption">A</span>  
 </div>  
    
 <div class="box">  
  <span class="caption">B</span>  
 </div>  
    
 <div class="box">  
  <span class="caption">C</span>  
 </div>  
    
 <div class="box">  
  <span class="caption">D</span>  
 </div>  
    
 <div class="box">  
  <span class="caption">E</span>  
 </div>  
    
 <div class="box">  
  <span class="caption">F</span>  
 </div>  
    
 <div class="box">  
  <span class="caption">G</span>  
 </div>  
    
 <div class="box">  
  <span class="caption">H</span>  
 </div>  
</body>

先將它們簡(jiǎn)單的設(shè)定一下樣式：

 .box {   
 background-color: #fff;   
 border: 3px solid #ccc;   
 float: left;   
 margin: 20px 40px 0 0;   
 height: 65px;   
 width: 160px;   
 text-align: center;   
}   
.caption {   
 font-size: 20px;   
 position: relative;   
 top: 20px;   
}

接著就一一來練習(xí)一下各種參數(shù)的使用方式。基本上使用 box-shadow 時(shí)最少得要提供 h-shadow 及 v-shadow 兩個(gè)參數(shù)：

.box:nth-child(1) {   
 -webkit-box-shadow: 3px 3px #f3d42e;   
 -moz-box-shadow: 3px 3px #f3d42e;   
 box-shadow: 3px 3px #f3d42e;   
}

若位移距離為正值時(shí)就是往右或往下偏移；反之則往左或往上
CSS3中box-shadow屬性如何制作邊框陰影效果

再加上 5px 的模糊半徑：

.box:nth-child(2) {   
 -webkit-box-shadow: 3px 3px 5px #f3d42e;   
 -moz-box-shadow: 3px 3px 5px #f3d42e;   
 box-shadow: 3px 3px 5px #f3d42e;   
}

CSS3中box-shadow屬性如何制作邊框陰影效果

擴(kuò)散距離會(huì)加強(qiáng)實(shí)際的陰影的范圍：

.box:nth-child(3) {   
 -webkit-box-shadow: 3px 3px 0 5px #f3d42e;   
 -moz-box-shadow: 3px 3px 0 5px #f3d42e;   
 box-shadow: 3px 3px 0 5px #f3d42e;   
}

位移的距離會(huì)在加上擴(kuò)散距離，所以若值為負(fù)的會(huì)減少陰影的范圍
CSS3中box-shadow屬性如何制作邊框陰影效果

擴(kuò)散出來的部份也會(huì)套上模糊的效果：

.box:nth-child(4) {   
 -webkit-box-shadow: 3px 3px 5px 5px #f3d42e;   
 -moz-box-shadow: 3px 3px 5px 5px #f3d42e;   
 box-shadow: 3px 3px 5px 5px #f3d42e;   
}

CSS3中box-shadow屬性如何制作邊框陰影效果

如果沒有設(shè)定位移距離的話，那么模糊的效果就會(huì)直接從區(qū)塊周圍露出：

.box:nth-child(5) {   
 -webkit-box-shadow: 0 0 15px #f3d42e;   
 -moz-box-shadow: 0 0 15px #f3d42e;   
 box-shadow: 0 0 15px #f3d42e;   
}

CSS3中box-shadow屬性如何制作邊框陰影效果

再加上擴(kuò)散距離：

.box:nth-child(6) {   
 -webkit-box-shadow: 0 0 15px 5px #f3d42e;   
 -moz-box-shadow: 0 0 15px 5px #f3d42e;   
 box-shadow: 0 0 15px 5px #f3d42e;   
}

CSS3中box-shadow屬性如何制作邊框陰影效果

另外，若在使用時(shí)加上 inset 參數(shù)的話，則原本顯示在區(qū)塊外的陰影效果就會(huì)變成是內(nèi)陰影的效果了：

 .box:nth-child(7) {   
 -webkit-box-shadow: 3px 3px #f3d42e inset;   
 -moz-box-shadow: 3px 3px #f3d42e inset;   
 box-shadow: 3px 3px #f3d42e inset;   
}

有仔細(xì)注意到嗎？本來位移距離為正值時(shí)就是往右或往下偏移，但因?yàn)榧由?inset 參數(shù)，所以效果就反過來了：
CSS3中box-shadow屬性如何制作邊框陰影效果

加上模糊半徑及擴(kuò)散距離：

 .box:nth-child(8) {   
 -webkit-box-shadow: 3px 3px 5px 5px #f3d42e inset;   
 -moz-box-shadow: 3px 3px 5px 5px #f3d42e inset;   
 box-shadow: 3px 3px 5px 5px #f3d42e inset;   
}

CSS3中box-shadow屬性如何制作邊框陰影效果

在元素上加了多組陰影設(shè)定的話：

.box:nth-child(9) {   
 -webkit-box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;   
 -moz-box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;   
 box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;   
}

陰影的階層關(guān)系是越先設(shè)定的階層會(huì)越高~
CSS3中box-shadow屬性如何制作邊框陰影效果

以上是“CSS3中box-shadow屬性如何制作邊框陰影效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

CSS3中box-shadow屬性如何制作邊框陰影效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽