【CSS3】 CSS3实现“图片阴影”效果

学习前端有点类似于学习英语，很多东西需要一点点累积，下面讲解CSS3实现图片阴影效果。

1、效果展示:Shadow Effect这个块有阴影的效果，尤其是底边的曲线阴影非常明显，本文主要以“Shadow Effect”这个块进行讲解曲线阴影的效果。

2、结构编写：把大体的框架写好。

shadow.html:

<!DOCTYPE>
<html>
<head>
	<title>CSS3实现曲线阴影</title>
	<meta charset="utf-8">
	<link type="text/css"  rel="stylesheet"  href="css/style.css">
</head>
<body>
	<div class="wrap effect"><!-把阴影的效果写在effect类中，方便！->
		<h1>Shadow Effect</h1>
	</div>
</body>
</html>

style.css:

body{
	font-family:Arial;
	font-size:20px;
}

body ul{
	margin:0px;
	padding:0px
	list-style:none;
}
.wrap{
	width:70px;
	height:200px;
	margin:50px auto;
	background:#fff;
}

3、原理分析：一个图形需要带有一个主投影，如图中绿色矩形部分，另一个带有弧度的图形也有自己的阴影效果，如图中红色部分，让这两个图形发生重叠，让他们的颜色一致然后可以把弧度阴影露出来，这样看到的就是一个曲线阴影的效果。

4、box-shadow讲解

首先写主投影，即effect这个类，主要通过CSS3里的box-shadow这个属性设置。

box-shadow有多个属性：h-shadow(水平方向的投影)、v-shadow(垂直方向的投影)、blur(可选，模糊程度，可设为任意px，且数值越大，模糊程度越大)、spread(可选，模糊尺寸)、color(可选，阴影颜色)、inset(可选、将外部阴影（outset）设置成内部阴影，默认是外部阴影)。如果把h-shadow和v-shadow都设为0的话，那么4个方向都会有阴影。

box-shadow浏览器兼容性：IE9+,Firefox4,Chrome,Opera以及Safari5.1。

box-shadow可以添加多个阴影，用逗号隔开。

完成主阴影部分：

.effect{
	box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
	webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
	moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
	o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}

此时的效果如下：

5、after和before

根据前面的原理分析，我们需要带有曲线阴影的图形，这是可以使用after和before来完成。

after选择器:在被选元素的内容后面插入内容；

before选择器:在被选元素的内容前面插入内容；

上面这两句话怎么理解呢？可以这样试试：

before：

.effect:before{
	content:"hello";
};

可以看到：Shadow Effect几个字向下移动了。(这里其实我不太懂，为什么hello没有被挤到外面呢？因为在下面after选择器中，hello是被挤到外面去了，我的猜想是：hello是一个单纯的文本，它在h1的前面，所以它先占用一部分空间，然后剩余的空间留给h1，因为h1的高度和盒子高度一样，但是hello已经占用了一部分高度，所以h1只能往下移，但为什么没有超出盒子呢？此时h1的高度又是多少？)

after:

.effect:after{
	content:"hello";
};

可以看到：hello被挤到外面去了（因为h1和盒子的高度都是200px）

言归正传，我们需要一个带弧度阴影的图形。

.effect:after{
	content:" ";
	background:#f00;/*为了让大家看清楚，先设置一个颜色红色*/
};

此时看不到任何东西，因为content为空。

为了让主阴影和弧度阴影重叠，我们需要利用定位的知识。在这里相对于effect定位，因为它是父类，先设置effect类：position:relative，再设置弧度阴影所在的盒子：position:absolute，然后确定弧度阴影所在盒子的大小，可以直接width和height，也可以直接设置它的位置，四个方向（top,right,bottom,left缺一不可）都需要设定，那么它的宽和高也就确定了。

.effect:after{
	content:" ";
	background:#f00;/*为了让大家看清楚，先设置一个颜色红色*/
	position:absolute;
	top:50%;
	bottom:0px;
	left:10px;
	right:10px;
};

这样盒子就出来了：

然后给这个盒子添加阴影，只需要外阴影：

        box-shadow:0 0 20px rgba(0,0,0,0.8);
	webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
	moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
	o-box-shadow:0 0 20px rgba(0,0,0,0.8);

但是这个阴影并不是弧形，而是直线，因此我们要给弧形阴影所在盒子设置一个半径，用到border-radius。

如果把border-radius设置为100px，就特别圆，下面还是直线，因此把border-radius设置为100px/10px（水平方向半径设置为100px，垂直方向设置为10px），还可以让阴影往下移点，使阴影更多，就可以设置bottom为负值：

让弧度阴影所在图形出现在主图形的后面，可以设置：z-index:-1

bottom为-2px：

bottom为-1px：

但是弧形阴影的颜色不是特别深，可以使用两个弧形投影，也就是再加一个弧形投影，使用before。

.effect:after,.effect:before{
	content:" ";
	background:#f00;/*为了让大家看清楚，先设置一个颜色红色*/
	position:absolute;
	top:50%;
	bottom:0px;
	left:10px;
	right:10px;
	box-shadow:0 0 20px rgba(0,0,0,0.8);
	webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
	moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
	o-box-shadow:0 0 20px rgba(0,0,0,0.8);
	border-radius:100px/10px;
	z-index:-1;

};

6、总结：把直角阴影写在盒子上，在盒子内部再插入两个曲线阴影，通过定位让直角阴影和曲线阴影重叠，把z-index设置为负，让曲线阴影到直角阴影的背后，再把border-radius把水平和垂直半径设置成不同的值形成弧度，这样曲线阴影的效果就实现了。

【CSS3】 CSS3实现“图片阴影”效果

猜你喜欢