詳解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í)就是往右或往下偏移;反之則往左或往上
再加上 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;
- }
擴(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ì)減少陰影的范圍
擴(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;
- }
如果沒有設(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;
- }
再加上擴(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;
- }
另外,若在使用時(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ù),所以效果就反過來了:
加上模糊半徑及擴(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;
- }
在元素上加了多組陰影設(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ì)越高~
當(dāng)熟悉 box-shadow 的用法時(shí),就能很簡(jiǎn)單又快速的將各種元素加上更有設(shè)計(jì)感的邊框效果唷!
相關(guān)文章
css3 box-shadow陰影(外陰影與外發(fā)光)圖示講解
這篇文章主要介紹了css3 box-shadow陰影(外陰影與外發(fā)光),通過五個(gè)測(cè)試通過圖片展示了陰影的不同位置不同效果,需要的朋友可以參考下2017-08-11詳解CSS3陰影 box-shadow的使用和技巧總結(jié)
這篇文章主要介紹了詳解CSS3陰影 box-shadow的使用和技巧總結(jié) ,具有一定的參考價(jià)值,有需要的可以了解一下。2016-12-03- box-shadow以由逗號(hào)分隔的列表來描述一個(gè)或多個(gè)陰影效果,本文就詳細(xì)的介紹一下box-shadow單邊陰影的實(shí)現(xiàn),感興趣的可以了解一下2023-05-15