盒子阴影box-shadow

CSS 快速掌握 admin 487浏览

box-shadow:水平阴影|垂直阴影|模糊距离|阴影尺寸|阴影颜色|内(外)阴影

水平阴影和垂直阴影必须的写,其余的是可以省略不写;

语法box-shadow:h-shadow v-shadow blur spread color inset;

注释:box-shadow向框添加一个或修个阴影;该属性是由逗号分隔列表;每个阴影有2~4个长度值、可选的颜色值以及可选的inset关键词来规定;省略长度的值是0.

描述
h-shadow 必需,水平阴影的位置,可为负值
v-shadow 必需,垂直阴影的位置,可为负值
blur 可选,模糊距离
spread 可选,阴影的尺寸
color 可选,阴影的颜色
inset 可选,将外部阴影(outset)改为内部阴影;默认值为outset
	<div class="box"></div>
	<style type="text/css">
		table{
			border-collapse: collapse;
			border-color: #ccc;
		}
		.box{
			margin-top: 100px;
			width: 100px;
			height: 100px;
			border: 1px solid #f00;
			/* box-shadow:水平阴影|垂直阴影|模糊距离|阴影尺寸|阴影颜色|inset outset(默认值)*/
			/* box-shadow:10px 3px 15px -2px #f90; */
			box-shadow:10px 3px 15px -2px #f90,10px 3px 15px -2px #ffa07a inset;
		}
	</style>		

结论

●盒子阴影可以有多组值,多组之间用逗号隔开就可以

●水平阴影正值阴影在右边负值在左边

●垂直阴影正值在下边,负值在上边

●模糊尺寸,值越大越模糊

转载请注明:大灰牛博客 » 盒子阴影box-shadow