box-shadow

?box-shadow在定義里是這么說的："box-shadow 屬性向框添加一個或多個陰影。"

是的，和他的名字一樣，這個屬性固然是用來制造陰影效果讓頁面更有立體感的。

語法：

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

其中屬性分別為：
h-shadow：必需。水平陰影的位置。允許負值。
v-shadow：必需。垂直陰影的位置。允許負值。
blur：可選。模糊距離。
spread：可選。陰影的尺寸。
color：可選。陰影的顏色。請參閱 CSS 顏色值。
inset：可選。將外部陰影 (outset) 改為內(nèi)部陰影。

瀏覽器支持：
IE9 、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。

我從慕課網(wǎng)上看到Amy老師講的 css3"圖片陰影"效果 一課里學(xué)到不少，其中就提到了曲線陰影和翹邊陰影。
課程鏈接：http://www.imooc.com/learn/240

曲線陰影

?原理：

　　　給元素本身設(shè)置陰影，再利用befor以及after偽類創(chuàng)建元素，給偽類也設(shè)置同樣的陰影，讓三個陰影重疊就實現(xiàn)了炫酷的陰影效果。(●'?'●)

代碼：

　　html:　　　　　

? ? ? ? ? ? ?<div class="wrap effect">
　　　　　　?<h1>shadow effect</h1>
　　　　 ?</div>

　　css:

　　　　.wrap{
　　　　　　width: 70%;
　　　　　　height: 200px;
　　　　　　margin: 50px auto;
　　　　　　background: #fff;
　　　　　　}
　　　　.wrap h1{
　　　　　　font-size: 20px;
　　　　　　text-align: center;
　　　　　　line-height: 200px;
　　　　　　}
　　　　.effect{
　　　　　　position: relative;
　　　　　　box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
　　　　　　-webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
　　　　　　-moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
　　　　　　-o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
　　　　　　}
　　　　.effect:after,.effect:before{
　　　　　　content: '';
　　　　　　position: absolute;
　　　　　　background: #fff;
　　　　　　top: 50%;
　　　　　　bottom: 0px;
　　　　　　left: 10px;
　　　　　　right: 10px;
　　　　　　box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
　　　　　　-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
　　　　　　-o-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
　　　　　　-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
　　　　　　border-radius:100px/10px ;
　　　　　　z-index: -1;
　　　　　　}

翹邊陰影

?原理：

　　與曲線陰影類似，利用兩個偽類創(chuàng)造陰影效果，利用transform改變偽類形狀成為平行四邊形，分別一左一右的方向。

代碼：

　　html：　　　

　　　　　　<ul class="box">
　　　　　　　　<li><img src="img/2.png"/></li>
　　　　　　　　<li><img src="img/3.png"/></li>
　　　　　　　　<li><img src="img/4.png"/></li>
　　　　　　</ul>

　　css：　

　　　　.box li{
　　　　　　width: 240px;
　　　　　　height: 240px;
　　　　　　list-style: none;
　　　　　　float: left;
　　　　　　margin: 20px 10px;
　　　　　　border: 2px solid #efefef;
　　　　　　box-shadow: 0 1px 4px rgba(0,0,0,0.27);
　　　　　　-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27);
　　　　　　-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27);
　　　　　　-o-box-shadow: 0 1px 4px rgba(0,0,0,0.27);
　　　　　　position: relative;
　　　　　　background: #fff;
　　　　　　}
　　　　.box li>img{
　　　　　　display: block;
　　　　　　margin: 11px;
　　　　}
　　　　.box li:before{
　　　　　　content: '';
　　　　　　position: absolute;
　　　　　　width: 90%;
　　　　　　left: 20px;
　　　　　　bottom: 10px;
　　　　　　background: transparent;
　　　　　　box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　-webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　-moz-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　-o-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　z-index: -1;
　　　　　　transform: skew(-10deg) rotate(-7deg);
　　　　　　-webkit-transform: skew(-10deg) rotate(-7deg);
　　　　　　-o-transform: skew(-10deg) rotate(-7deg);
　　　　　　-moz-transform: skew(-10deg) rotate(-7deg);
　　　　　　-ms-transform: skew(-10deg) rotate(-7deg);
　　　　}
　　　　.box li:after{
　　　　　　content: '';
　　　　　　position: absolute;
　　　　　　width: 90%;
　　　　　　height: 80%;
　　　　　　left: 20px;
　　　　　　bottom: 10px;
　　　　　　background: transparent;
　　　　　　box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　-webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　-moz-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　-o-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
　　　　　　z-index: -1;
　　　　　　transform: skew(10deg) rotate(7deg);
　　　　　　-webkit-transform: skew(10deg) rotate(7deg);
　　　　　　-o-transform: skew(-10deg) rotate(7deg);
　　　　　　-moz-transform: skew(10deg) rotate(7deg);
　　　　　　-ms-transform: skew(10deg) rotate(7deg);
　　　　}

大家可以把代碼復(fù)制粘貼，自己查看一下元素研究一下具體詳情，還有不懂的可以直接打開上面提到的課程自行學(xué)習(xí)。

?

福利：

喜歡偷懶的直接拿去復(fù)制粘貼吧，我經(jīng)常用到的陰影代碼

? ? ? ? ? ? ? ? ? ? box-shadow:3px 2px 7px #DCDCDC, 2px 2px 5px #DCDCDC;
? ? ? ? ? ? ? ? ? ? -webkit-box-shadow:3px 2px 7px #DCDCDC, 2px 2px 5px #DCDCDC;
? ? ? ? ? ? ? ? ? ? -moz-box-shadow:3px 2px 7px #DCDCDC, 2px 2px 5px #DCDCDC;

總結(jié)

以上是生活随笔為你收集整理的box-shadow技巧分享的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。