一、css3边框
1、border-image 边框
border-image: url(xxx.png) number
stretch 很好理解就是拉伸，有多长拉多长。
repeat (和4角上 同等大小图片进行平铺 当边框中间区域长度不是4角图片大小的整数倍时 会被切割)
铺满(round)(4角上的图片 进行拉伸平铺 不会被切割)（共三个参数） （注释：content宽度/border相应位置宽度 四舍五入张图片填充）
number 为截取指定图片四周的宽度作为border的背景填充部分(截取图可按border-width 大小伸缩), number为一个数字时是复合写法 最后一个属性为border-image的展示策略 eg:border-image: url(‘./border.png‘) 27 round;
2、border-radius — 圆角
border-radius:20px; = border-radius:20px 20px 20px 20px;
is equivalent to:
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
border-radius:10px （代表四个点的半径都是10px）
border-radius:10px 20px （代表左上右下半径为10px 右上左下半径为20px）
border-radius:10px 20px 30px（代表左上半径为10px 右上左下半径为20px 右下半径为30px）
border-radius:10px 20px 30px 40px（顺时针左上开始，四个角的值）
二、css3背景
3、box-shadow — 盒子阴影
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
eg: .box-shadow{ box-shadow:4px 2px 6px 7px #333333 inset; }
同一盒子，可以同时加多个阴影，阴影之间用“,”隔开
.box-shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }
css3边框与背景
原文地址：https://www.cnblogs.com/tianya-guoke/p/10182630.html