盒模型的边框与阴影效果

开发工具与关键技术：html+css
作者： 李伙
撰写时间： 2019年2月16日

在学习前端过程中，我们可以利用css中的边框与阴影效果来使页面更加完美，
边框(border)的3个相关属性：
①宽度(border-width):设置盒子边框的宽度，可以使用除百分比和负数之外的任何绝对值。
②样式(border-style):设置盒子边框的样式，有none(无边框),hidden(隐藏边框),dotted(点线边框),dashed(虚线边框),solid(实线边框),double(双线边框),groove(3D凹槽边框),ridge(3D凸槽边框),inset(3D凹入边框), outset(3D凸出边框)等文本值。
③颜色(border-color):设置盒子边框的颜色，可以使用任何颜色值。
border为复合属性：顺序为盒子边框的宽度 样式 颜色。
④ border-radius属性为盒模型添加圆角效果：
border-radius：该属性用于指定圆角边框的圆角半径。
border-top-left-radius:该属性用于指定左上角的圆角半径。
border-top-right-radius:该属性用于指定右上角的圆角半径。
border-bottom-left-radius:该属性用于指定左下角的圆角半径。
border-bottom-right-radius:该属性用于指定右下角的圆角半径。
⑤box-shadow属性为盒模型添加阴影，该属性可用于整个盒模型添加阴影。
box-shadow:是一个复合属性。它含有以下5个属性值。
hOffset:该属性值控制阴影在水平方向的偏移。
vOffset:该属性值控制阴影在垂直方向的偏移
blurLength:该属性值控制阴影的模糊程度。
scaleLength:该属性值控制阴影的缩放程度。
color:该属性值控制阴影的颜色。
效果如下：

.divone {
		width: 300px;
		height: 300px;
		margin: 200px auto;
		padding: 10px;
		font-size: 25px;
		text-align: center;
		line-height: 300px;
		border: 10px solid #900;/*设置盒子的边框 样式 颜色*/
		border-radius: 40px;/*设置圆角的div*/
		box-shadow: 10px 10px 5px #000000;/*对盒子添加阴影*/
	}