首页>前端教程>CSS教程

CSS3教程:box-shadow完成盒阴影效果

与text-shadow的原理一样,只不过text-shadow是为文字做阴影,而box-shadow是为盒对象做阴影。这里的盒包括块状(block)、内联(inline)、内联块状对象(inline-block)。

如果对盒对象不清楚的童鞋,可以先看这篇文章:

CSS教程:display常用的四个值(block,inline,none,inline-block)

1、语法结构

box-shadow:length length length color;

前面三个length分别表示阴影偏移盒的水平距离、纵向距离、模糊半径,color表示阴影的颜色。

比如:

box-shadow:10px 10px 0px #999;
box-shadow:-10px -10px 0px #999;

如果要满足各种浏览器,最好加上前缀:

-webkit-box-shadow:0 10px 10px rgba(0,0,0,.7);
-moz--box-shadow:0 10px 10px rgba(0,0,0,.7);
box-shadow:0 10px 10px rgba(0,0,0,.7);

2、案例效果

box-shadow案例.jpg

查看案例

3、HTML源代码

<body>
<div class="main">
	<div class="boxs clearfix">
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
    </div>
    <div class="box1 cl">2</div>
</div>
</body>

4、CSS样式代码

body{
	margin:0;
	padding:0;}
	
.clearfix:after{/*高度自适应*/
	content:"";
	display:block;
	clear:both;}
	
.cl{/*清除浮动影响*/
	clear:both;}
	
body{
	background-color:#eee;}
	
body:before{/*在body里面的最前面添加内容*/
	content:"";
	position:fixed;/*固定定位*/
	top:-10px;/*把高度往上移,看不见对象的高度。*/
	left:0;
	z-index:1000;
	width:100%;
	height:10px;/*有高度才能有阴影*/
	-moz-box-shadow:0 0 10px rgba(0,0,0,.8);/*for firefox*/
	-webkit-box-shadow:0 0 10px rgba(0,0,0,.8);/*for chrome,safari*/
	box-shadow:0 0 10px rgba(0,0,0,.8);/*放在有前缀的样式之后*/
	}

.main{
	width:720px;
	margin:60px auto;}
.box{
	position:relative;/*相对定位*/
	top:0;
	left:0;
	z-index:1;
	width:150px;
	height:150px;
	background-color:#fff;
	border-radius:2px;
	float:left;
	margin:5px;
	padding:10px;
	-webkit-transition:box-shadow .2s linear,top .2s linear;
	-moz-transition:box-shadow .2s linear,top .2s linear;
	transition:box-shadow .2s linear,top .2s linear;/*过渡效果*/}

.box:hover{/*在IE6里面不支持div的hover伪类选择器,如果要支持低端浏览器,请使用jQuery。*/
	/*background-color:#F99;*/
	cursor:pointer;/*光标变成手型*/
	top:-1px;/*往上移动1px*/
	-webkit-box-shadow:0 5px 20px #ccc;
	-moz-box-shadow:0 5px 20px #ccc;
	box-shadow:0 5px 20px #ccc;/*添加盒阴影。*/
	}
.box1{
	position:relative;
	width:600px;
	height:250px;
	background-color:#fff;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;/*添加圆角半径*/
	margin:20px;
	padding:10px;
	}
.box1:before,.box1:after{/*伪元素选择器,在box1里面的前后添加伪元素。*/
	content:"";
	position:absolute;
	z-index:-1;/*置于box1的下面。*/
	bottom:10px;
	left:10px;
	width:30%;
	height:10px;
	-webkit-box-shadow:0 10px 10px rgba(0,0,0,.7);
	-moz--box-shadow:0 10px 10px rgba(0,0,0,.7);
	box-shadow:0 10px 10px rgba(0,0,0,.7);
	-ms-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	transform:rotate(-3deg);/*逆时针旋转3度。*/
	}
.box1:after{
	-ms-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	transform:rotate(3deg);/*顺时针旋转3度*/
	left:auto;/*设置left的值为auto,才能让after伪元素对象在右边显示。冲突上面设置的left:10px*/
	right:10px;
	}

如果对css的伪元素(:before,:after)选择器还不懂的童鞋,可以先学习一下这两个选择器哦。

点赞


4
保存到:

相关文章

Top