欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

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

創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站，集網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營(yíng)銷(xiāo)、軟文平臺(tái)等專(zhuān)業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計(jì)，讓網(wǎng)站在運(yùn)行后，在搜索中有好的表現(xiàn)，專(zhuān)業(yè)設(shè)計(jì)制作為您帶來(lái)效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

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

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

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

h-shadow,v-shadow必須。水平，垂直陰影的位置。允許賦值。blur可選，模糊距離。spread可選，陰影的尺寸。color可選，陰影的顏色。inset可選，將外部陰影（outset）改為內(nèi)部陰影。
來(lá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;   
}

接著就一一來(lái)練習(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ò)散出來(lái)的部份也會(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屬性如何制作邊框陰影效果

如果沒(méi)有設(shè)定位移距離的話(huà)，那么模糊的效果就會(huì)直接從區(qū)塊周?chē)冻觯?/p>

.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ù)的話(huà)，則原本顯示在區(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ì)注意到嗎？本來(lái)位移距離為正值時(shí)就是往右或往下偏移，但因?yàn)榧由?inset 參數(shù)，所以效果就反過(guò)來(lái)了：
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è)定的話(huà)：

.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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：CSS3中box-shadow屬性如何制作邊框陰影效果
本文路徑：http://chinadenli.net/article26/pdcdcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、小程序開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

綿陽(yáng)服務(wù)器托管