1.1 边框
border-image
需要结合 border 使用；
- 简写
<div style="height: 200px;border: 10px solid transparent;border-image: url('border.png') 30 round;">
</div>
- 单独属性
<div style="height: 200px;border: 10px solid transparent;border-image-source: url('border.png');border-image-slice: 10 20 30 40;border-image-width:1;border-image-outset:1px;border-image-repeat:round">
</div>
<!--
border-image-slice 上右下左，4 条分割线把图片切 9 块，中间的舍去，四个角作为边框角，四个边按需求拉伸或者平铺
border-image-width 上右下左，4 个值，倍数或者 %
border-image-outset 上右下左，边框图与边框距离，默认 0，倍数或者 px
border-image-repeat 填充方式，默认 stretch、repeat、round、space、initial、inherit
-->
border-radius
<div style="border-radius: 10px 20px 30px 40px; height: 100px;background-color: red;">
</div>
box-shadow
<div style="box-shadow: 10px 20px 5px 2px #888888;height: 100px;background-color: red;margin: 50px">
</div>