边框–border,包裹在padding外面的一层线。 给矩形设置边框线
.box{ /* 设置矩形大小 */ width: 200px; height: 30px; /* 设置边框线 */ border-width: 2px; border-color: blue; border-style: solid; } border-width：边框的粗细，单位是pxborder-color：边框的颜色border-style：边框的线型，solid为实线，dashed为虚线，还有其他线型边框的简写
.box{ border:2px solid blue; }border后面跟的三个值之间要用空格隔开，顺序可以忽略。
分别设置边框
.box{ /* 添加顶部border */ border-top:1px solid black; /*添加右侧border*/ border-right:3px solid orange; /*添加底部border*/ border-bottom:5px dashed pink; /*添加右侧border*/ border-right: 10px dashed purple; }利用层叠性设置边框
.box{ /*设置矩形的宽*/ width:300px; /*设置矩形的高*/ height:300px; /*设置矩形的背景颜色*/ background-color:white; /*设置矩形的边框*/ /*统一设置矩形的所有边框样式*/ border:2px solid black; /*重新设置一个下边框的样式来层叠掉统一设置的边框的样式*/ border-bottom:5px solid orange; }圆角的属性归类于边框，即border-radius。
圆角的统一设置 只设置圆角不设置矩形是看不出圆角的，但是看不到不代表不存在。
div { width: 200px; height: 200px; background-color: violet; border-radius: 18px; }圆角分开设置
.box{ width: 200px; height: 200px; background-color: violet; border-top-left-radius: 5px; border-top-right-radius: 10px; border-bottom-left-radius: 20px; border-bottom-right-radius: 15px; }阴影
.box{ width: 200px; height: 200px; border:1px solid #c4c4c4; /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); border-radius: 15px; }清除默认格式
margin:0px; padding:0px;