box-shadow 阴影
使用这个可以让更有立体感,给元素阴影,使得元素看起来是悬浮在原来的位置,下面就看看它的吧。
@R_853_2@-shadow
向框或多个阴影。
通过 @R_853_2@-shadow
可以给任意 H5 元素阴影,可以是,如果用,
号隔开可以多个。
@R_853_2@-shadow:h-shadow v-shadow blur color;
.demo{
@R_853_2@-shadow:px px px #ccc;
}
值
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 @R_853_2@-shadow 。
<div class="demo">
网
</div>
.demo{
width: px;
height: px;
text-align: center;
line-height: px;
@R_853_2@-shadow: px px px #ccc;
}
图
.demo{
width: px;
height: px;
text-align: center;
line-height: px;
@R_853_2@-shadow: px px px #ccc,px px px rgba(, , ,),px px px rgba(, , , ) ;
}
图
它的一把用来给元素阴影,交互设计师们热衷于在鼠标覆盖到元素时候,给元素悬浮,使它变得不同,例如:
.demo{
width:px;
height:px;
transition: @R_853_2@-shadow s;
}
.demo:hover{
@R_853_2@-shadow: px px px #ccc;
}
而网上常见的 css3 下雨,就是利用 @R_853_2@-shadow 颜色叠加的特性制作出来的。
<div class="demo"></div>
.demo{
width: px;
height: px;
border-radius: ;
@R_853_2@-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;;
@R_853_2@-shadow: px px -px #000, -px px -px #000;
}
图
看完这个例子,我们应该已经明白 @R_853_2@-shadow
形成的阴影可能是组合。