css3中的border和background属性

border

border是一个组合属性，它有四个值，每个值代表一个方向，每个方向都有宽度，线条样式和颜色

div{
   
    width: 100px;
    height: 100px;
    border: 5px solid black;
    border-left: 5px solid red;
    border-right: 5px dashed blue;
    border-top: 5px double #008c8c;
}
<div></div>

border-image

border-image: source slice repeat;
source:url(图片路径) / source:创建渐变色
slice:top right bottom left fill 前四个参数表示四个方向的切割线，最后一个参数表示把内容区也填充了
举个例子
border-image-slice: 25% 30% 12% 20%;

此图来自于http://css.doyoe.com/
repeat:stretch/repeat/round/space
stretch：拉伸（默认）
repeat：重复平铺，如果图像超过边界则被截断
round：与repeat类似，但当图像不能以整数次平铺时，会缩放图像。
space：与repeat类似，但当图像不能以整数次平铺时，会使用空白