【CSS】单边阴影、双边阴影、三边阴影

实现阴影，先来了解一下box-shadow这个属性。

MDN上的定义：box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

语法：

/ ** 阴影扩散方向｜X 轴偏移量｜Y 轴偏移量｜模糊半径 ｜扩散半径｜颜色 */
box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] [color] ;
/**
注意：当给出两个、三个或四个 <length>值时
	1、如果只给出两个值，那么这两个值将会被当作 <offset-x><offset-y> 来解释。
	2、如果给出了第三个值，那么第三个值将会被当作<blur-radius>解释。
	3、如果给出了第四个值，那么第四个值将会被当作<spread-radius>来解释。
*/

好了，准备工作都做好了，那就直接进入主题吧。

1、单边阴影

具体实现如下：

/** border:1px solid #BFBFBF; */

/** 上阴影 */
.top {
	box-shadow: 0px -3px 3px -2px #aaa; 
}
/** 右阴影 */
.right {
	box-shadow: 3px 0 3px -2px #aaa; 
}
/** 下阴影 */ 
.bottom {
	box-shadow: 0px 3px 3px -2px #aaa; 
}
/** 左阴影 */
.left {
	box-shadow: -3px 0 3px -2px #aaa; 
}

效果如图：

2、双边阴影

具体实现如下：

/** 右上阴影 */
.right-top {
	box-shadow: 3px -3px 3px -2px #aaa; 
}
/** 右下阴影 */
.right-bottom {
	box-shadow: 3px 3px 3px -2px #aaa; 
}
/** 左下阴影 */ 
.left-bottom {
	box-shadow: -3px 3px 3px -2px #aaa; 
}
/** 左上阴影 */
.left-top {
	box-shadow: -3px -3px 3px -2px #aaa; 
}
/** 上下阴影 */	
.top-bottom {
	/** 上阴影+下阴影 */
	box-shadow: 0px -3px 3px -2px #aaa, 0px 3px 3px -2px #aaa; 
}
/** 左右阴影 */
.left-right {
	/** 左阴影+右阴影 */
	box-shadow: -3px 0 3px -2px #aaa, 3px 0 3px -2px #aaa; 
}

效果如图：

3、三边阴影

上面的上下阴影和左右阴影，是通过结合实现的，那么三边阴影也是一样的方式即可。
具体实现如下：

/** 无上阴影 */
.no-top {
	/** 左下阴影+右下阴影 */
	box-shadow: -3px 3px 3px -2px #aaa, 3px 3px 3px -2px #aaa; 
}
/** 无右阴影 */ 
.no-right {
	/** 左上阴影+左下阴影 */
	box-shadow: -3px -3px 3px -2px #aaa, -3px 3px 3px -2px #aaa; 
}
/** 无下阴影 */ 
.no-bottom {
	/** 左上阴影+右上阴影 */
	box-shadow: -3px -3px 3px -2px #aaa, 3px -3px 3px -2px #aaa; 
}
/** 无左阴影 */
.no-left {
	/** 右上阴影+右下阴影 */
	box-shadow: 3px -3px 3px -2px #aaa, 3px 3px 3px -2px #aaa; 
}

效果如图：

到这里，关于阴影的部分就差不多啦，如果要实现全阴影，偏移量设置为0，设置模糊半径即可。

欢迎大家一起学习交流呀！