Box-shadow 陰影使用這個屬性可以讓頁面更有立體感,給元素添加一個陰影,使得元素看起來是懸浮在原來的位置,下面就看看它的用法吧。 1. 官方定義Box-shadow 屬性向框添加一個或多個陰影。 2. 解釋通過 Box-shadow 可以給任意 H5 元素添加陰影,可以是一個,如果用,號隔開可以添加多個。 3. 語法Box-shadow:h-shadow v-shadow blur color; .demo{
Box-shadow:px px px #ccc;
}屬性值
5. 兼容性
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 Box-shadow 屬性。 6. 實例<div class="demo"> 網 </div>
.demo{
width: px;
height: px;
text-align: center;
line-height: px;
Box-shadow: px px px #ccc;
}效果圖
.demo{
width: px;
height: px;
text-align: center;
line-height: px;
Box-shadow: px px px #ccc,px px px rgba(, , ,),px px px rgba(, , , ) ;
}效果圖
7. 經驗分享它的一把用來給元素添加一個陰影,交互設計師們熱衷于在鼠標覆蓋到元素時候,給元素增加一個懸浮效果,使它變得不同,例如: .demo{
width:px;
height:px;
transition: Box-shadow s;
}
.demo:hover{
Box-shadow: px px px #ccc;
}而網上常見的 css3 下雨效果,就是利用 Box-shadow 顏色疊加的特性制作出來的。 <div class="demo"></div> .demo{
width: px;
height: px;
border-radius: ;
Box-shadow: px px px #dedede, px px px #dedede,px px px #dedede,px px px #dedede;
}效果圖
如果畫得密集些就更像了,當然這些就需要專業的設計師去做一個方案了。 最后這里介紹一下陰影效果使用的竅門。 .demo{
width: px;
height: px;
text-align: center;
line-height: px;;
Box-shadow: px px -px #000, -px px -px #000;
}效果圖
看完這個例子,我們應該已經明白 Box-shadow 形成的陰影效果可能是一個組合。 8. 小結
|