边框设置border:solid npx; 边框为npx的实线border:solid npx 颜色; 边框的颜色border-radius: npx ; 边框角为npx的弧度border-radius:30%; 按百分数设置边框弧度，会有水滩效果border-radius：10px 20px 30px 40px;四个属性值，分别表示左上角、右上角、右下角、左下角的圆角大小（顺时针方向）border-bottom:noneborder-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-styleoutline-coloroutline-widthoutline-offset:npx;轮廓到边框的距离改变div内容区域时，不会改变div大小:box-sizing:border-box;边框外围样式outline:solid 2px red; 在边框外围设置一个不占据空间的红色实现图片作为边框/a/1190000010969367border-image: url(border.png) 27 round;border-image-sourceborder-image-slice剪切位置,对应上下左右,中间部分会被丢弃,也可为百分比border-image-repeat:roundborder-image-width:css单位用来限制相应区域border-image的范围,默认为border-image-sliceborder-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
