css3 box-shadow 盒子效果

css3 box-shadow 盒子效果

 

(2014-02-13 16:57:25)


转载▼

标签：  it

分类： Other

简单的外阴影

最简单的外阴影效果就是x和y的偏移值设置为0，然后设置模糊值和颜色值，下面实例为了实现鼠标滑过能更好的由灰色阴影平滑到蓝色阴影而加了一个简单的动画效果transition，另外又增加了一个圆角效果

外阴影demo

Css Code

img{
vertical-align:bottom;
}
#demo1 li{
margin-right:10px;
padding:2px;
border:1px solid #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
#demo1 li:hover{
border:1px solid rgba(82, 168, 236, 0.6);
-webkit-box-shadow:0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}

简单的内阴影

简单的内阴影就是简单的外阴影上面再加一个inset参数，详见下面效果

内阴影demo

Css Code

#demo2 li{
padding:5px;
margin-right:10px;
border:1px solid #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
#demo2 li:hover{
border:1px solid rgba(82, 168, 236, 0.6);
-webkit-box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);
}

扩展值

看完内阴影和外阴影上面两个简单的案例之后，我们现在再来看一下它的另外一个参数那就是spread，即扩展值

扩展值demo

no spread

0 10px 10px rgba(0,0,0,0.5)

spread

0 10px 10px -10px rgba(0,0,0,0.5)

no spread

inset 0 10px 10px rgba(0,0,0,0.5),

inset 0 -10px 10px rgba(0,0,0,0.5)

spread

inset 0 10px 10px -10px rgba(0,0,0,0.5),

inset 0 -10px 10px -10px rgba(0,0,0,0.5)

Css Code

#demo3 li{
width:320px;
height:180px;
background-color:#ededed;
margin:30px 30px 0 0;
text-align:center;
}
#demo3 li:nth-child(-n+2){
margin-top:0;
}
#demo3 li span{
color:#f00;
}
#demo3 li p{
margin-top:50px;
font-size:16px;
}
#demo3 li:nth-of-type(1){
-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(2){
-webkit-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(3){
-webkit-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(4){
-webkit-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
}

注：由上面两组对比（红色部分表示spread值），我们可以看出，使用spread值我们可以制作单边的阴影，如想了解更多请参阅：box-shadow's unnoticed spread

配合其他css3属性，制作超强box-shadow

接下来的阴影效果会比较的复杂，一般要结合before，after及transform属性，当然如果需要鼠标滑过有动画，那还得来加入transition什么的。当然这也有捷径可以走的啊，有工具可以帮我们生成各种box-shadow，工具请参看下面的更多资料里面的最后一个

超强组合demo

bottom right style

bottom style

top left & bottom right style

book style

stick style

Css Code

#demo1 li{
margin-right:10px;
padding:2px;
border:1px solid #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
#demo1 li:hover{
border:1px solid rgba(82, 168, 236, 0.6);
-webkit-box-shadow:0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}

#demo2 li{
padding:5px;
margin-right:10px;
border:1px solid #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
#demo2 li:hover{
border:1px solid rgba(82, 168, 236, 0.6);
-webkit-box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow:inset 0 0 8px rgba(82, 168, 236, 0.6);
}
#demo3 li{
width:320px;
height:180px;
background-color:#ededed;
margin:30px 30px 0 0;
text-align:center;
}
#demo3 li:nth-child(-n+2){
margin-top:0;
}
#demo3 li span{
color:#f00;
}
#demo3 li p{
margin-top:50px;
font-size:16px;
}
#demo3 li:nth-of-type(1){
-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(2){
-webkit-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(3){
-webkit-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(4){
-webkit-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
}
#demo4 li{
width:320px;
height:180px;
background-color:#ededed;
margin:50px 30px 0 30px;
text-align:center;
line-height:180px;
font-size:16px;
position:relative;
}
#demo4 li:nth-child(-n+2){
margin-top:0;
}
#demo4 li:before,
#demo4 li:after{
position:absolute;
z-index:-1;
}

#demo4 li:nth-of-type(1):after{
content:"";
width:50%;
height:50%;
right:0;
top:50%;
box-shadow:20px 30px 15px rgba(0,0,0,0.2);
-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);
-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);
-ms-transform:skew(10deg,10deg) translate(-40px,-20px);
-o-transform:skew(10deg,10deg) translate(-40px,-20px);
transform:skew(10deg,10deg) translate(-40px,-20px);
}

#demo4 li:nth-of-type(2):before{
content:"";
width:50%;
height:50%;
left:0;
top:50%;
box-shadow:20px 30px 15px rgba(0,0,0,0.2);
-moz-transform:skewX(-10deg) skewY(-10deg) translate(0,-20px);
-webkit-transform:skew(-10deg,-10deg) translate(0,-20px);
-ms-transform:skew(-10deg,-10deg) translate(0,-20px);
-o-transform:skew(-10deg,-10deg) translate(0,-20px);
transform:skew(-10deg,-10deg) translate(0,-20px);
}
#demo4 li:nth-of-type(2):after{
content:"";
width:50%;
height:50%;
right:0;
top:50%;
box-shadow:20px 30px 15px rgba(0,0,0,0.2);
-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);
-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);
-ms-transform:skew(10deg,10deg) translate(-40px,-20px);
-o-transform:skew(10deg,10deg) translate(-40px,-20px);
transform:skew(10deg,10deg) translate(-40px,-20px);
}

#demo4 li:nth-of-type(3):before{
content:"";
width:50%;
height:50%;
left:0;
top:0;
box-shadow:-20px -30px 15px rgba(0,0,0,0.2);
-moz-transform:skewX(10deg) skewY(10deg) translate(40px,30px);
-webkit-transform:skew(10deg,10deg) translate(40px,30px);
-ms-transform:skew(10deg,10deg) translate(40px,30px);
-o-transform:skew(10deg,10deg) translate(40px,30px);
transform:skew(10deg,10deg) translate(40px,30px);
}
#demo4 li:nth-of-type(3):after{
content:"";
width:50%;
height:50%;
right:0;
top:50%;
box-shadow:20px 30px 15px rgba(0,0,0,0.2);
-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);
-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);
-ms-transform:skew(10deg,10deg) translate(-40px,-20px);
-o-transform:skew(10deg,10deg) translate(-40px,-20px);
transform:skew(10deg,10deg) translate(-40px,-20px);
}

#demo4 li:nth-of-type(4){
background: #fff;
background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
background: -webkit-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
border: 1px solid #ccc;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
-webkit-border-bottom-right-radius: 60px 5px;
-moz-border-radius-bottomright: 60px 5px;
border-bottom-right-radius: 60px 5px;
}
#demo4 li:nth-of-type(4):before{
content:"";
width:98%;
height:98%;
left:0;
top:0;
background-color:#fff;
border: 1px solid #ccc;
-webkit-transform:skew(4deg, 2deg) translate(6px, 7px);
-moz-transform:skewX(4deg) skewY(2deg) translate(6px, 7px);
-ms-transform:skew(4deg, 2deg) translate(6px, 7px);
-o-transform:skew(4deg, 2deg) translate(6px, 7px);
transform:skew(4deg, 2deg) translate(6px, 7px);
-webkit-border-bottom-right-radius: 60px 5px;
-moz-border-radius-bottomright: 60px 5px;
border-bottom-right-radius: 60px 5px;
}
#demo4 li:nth-of-type(4):after{
content:"";
width:98%;
height:98%;
left:0;
top:0;
background-color:#fff;
border: 1px solid #ccc;
-webkit-transform:skew(3deg, 1deg) translate(4px, 4px);
-moz-transform:skewX(3deg) skewY(1deg) translate(4px, 4px);
-ms-transform:skew(3deg, 1deg) translate(4px, 4px);
-o-transform:skew(3deg, 1deg) translate(4px, 4px);
transform:skew(3deg, 1deg) translate(4px, 4px);
}

#demo4 li:nth-of-type(5){
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
#demo4 li:nth-of-type(5):before{
content:"";
width:110px;
height:30px;
background-color:rgba(255,255,0,0.2);
z-index:1;
top:8px;
left:-32px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
#demo4 li:nth-of-type(5):after{
content:"";
width:110px;
height:30px;
background-color:rgba(255,255,0,0.2);
z-index:1;
bottom:8px;
right:-32px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

呵呵，这个应该是比较强大吧，当然还有更多效果，请参阅更多资料。虽说有些可以通过工具生成，但是最好还是自己去操作下，明白一些原理，其实东西也没有看到的那么多，只是附加了一些浏览器前缀，运用的css3属性也就那么几个（:before,:after,transform），静下心来研究下，这不是问题的

注：火狐14.0
d7e9
.0升级后，对skew的支持变成skewX和skewY，请看pre代码部分，webkit和moz的不同skew