前端学习笔记之盒子阴影

前端学习笔记之盒子阴影

盒子阴影–box-shadow

前两个属性是必须写的，其余的可以省略。

语法格式

box-shadow： 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。可将外部阴影（outset）改为内部阴影。

demo:

// An highlighted block
div{
		width: 200px;
		height: 200px;
		margin:0 auto;
/*box-shadow 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影（ 想要内阴影改为inset）*/ 
		box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.1);
	}