css 边框和圆角样式

边框设置
	border:solid npx;   	边框为npx的实线
	border:solid npx 颜色;   边框的颜色
	
	border-radius: npx ;  	边框角为npx的弧度
	border-radius:30%;    按百分数设置边框弧度，会有水滩效果
	border-radius：10px   20px   30px  40px;
		四个属性值，分别表示左上角、右上角、右下角、左下角的圆角大小（顺时针方向）
		
	border-bottom:none
	
	border-right:solid 1px red;   只设置右边框为红色的1px的实线
	
	border-color 边框颜色
		当不写边框颜色时,会继承盒子字体的颜色
		
	border-style:solid dashed dashed dashe; 分别设置四周边框形式
		dotted - 定义点线边框
		dashed - 定义虚线边框
		solid  - 定义实线边框
		double - 定义双边框
		groove - 定义 3D 坡口边框。效果取决于 border-color 值
		ridge  - 定义 3D 脊线边框。效果取决于 border-color 值
		inset  - 定义 3D inset 边框。效果取决于 border-color 值
		outset - 定义 3D outset 边框。效果取决于 border-color 值
		none   - 定义无边框
		hidden - 定义隐藏边框

	border-color:颜色 颜色 颜色 颜色; 分别设置边框四个颜色
	border-width:npx npx npx npx;  分别设置四周边框宽度
		thin、medium或thick	采用浏览器预定义值
	
圆角设置
	border-radius:npx; 四个角
	border-radius:npx npx; 左上角和右下角   右上角和左下角
	border-radius:npx npx npx npx; 左上 右上  右下 左下

外边框:
	详细看：css outline详解这篇文章
	轮廓是在元素边框之外绘制的,并且可能与其他内容重叠。
	同样,轮廓也不是元素尺寸的一部分,元素的总宽度和高度不受轮廓线宽度的影响。
	
	outline:none;
	outline:outline-style(必填) outline-color outline-width	顺序无影响
	outline-style	同border-style
	outline-color
	outline-width
	outline-offset:npx;	轮廓到边框的距离

改变div内容区域时，不会改变div大小:
	box-sizing:border-box;

边框外围样式
	outline:solid 2px red;  在边框外围设置一个不占据空间的红色实现

图片作为边框
	https://segmentfault.com/a/1190000010969367
	
	border-image: url(border.png) 27 round;
	border-image-source
	border-image-slice	剪切位置,对应上下左右,中间部分会被丢弃,也可为百分比
	border-image-repeat:round
	border-image-width:css单位	用来限制相应区域border-image的范围,默认为border-image-slice
	border-image-outset:css单位	用来设置border-image距离border的偏移距离

.border_image {
    width: 400px;
    height: 115px;
    border: 3em double orange;
    -webkit-border-image: url(border.png) 27 round;
    border-image: url(border.png) 27 round;
    
}

下图(27×3)px *(27×3)px



strech

repeat