css3中的圆角边框，盒子阴影、边界图片、盒子的边框模型等

圆角边框：border-radius:25px
- `border-radius: 15px 50px 30px 5px;`：左上角为15px，右上角为50px，右下角为30px，左下角为5px。
- `border-radius: 15px 50px 30px;`：左上角为15px，右上角和左下角为50px，右下角为30px。
- `border-radius: 15px 50px;`：左上角和右下角为15px，右上角和左下角为50px。
- `border-radius: 15px;`：四个角都是15px。
椭圆边角：
.radius8 {
    color: white;
    background: green;
    border-radius: 50px/15px;     -------除的数越小，边框就越偏离直线，越大，就线就比较直
}
.radius9 {
    color: white;
    background: green;
    border-radius: 15px/50px;      -------除的数越小，边框就越偏离直线，越大，就线就比较直
}
.radius10 {
    color: white;
    background: green;
    border-radius: 50%;-------------------百分比越接近50%，就越接近正椭圆
}
盒阴影：box-shadow:10px 10px 5px #red ---------------第三个数值是阴影模糊度
边界图片：
盒子边框环绕-------border-image: url('img/border.png') 30 30 round;  -----round是图片重复
----------------------------------------------------------------------stretch是拉伸图片
.example1 {
    width: 700px;
    overflow: auto;
    padding: 5px 10px;
    background-image: url('img/flower.gif'), url('img/paper.gif');-----------在上面的图片是第一个
    background-position: right bottom, left top;-------------------------第一个的图片放的位置，注意位置
    background-repeat: no-repeat, repeat;-------------------------------第一个图片不重复，第二个图片重复
}
background-size:100% 100%       平铺到父元素的大小百分之百
盒子的边框模型，border-box在最外面，padding-box在中间，content-box在最里面
background-origin: padding-box;----------padding是默认的
----------------------content-box;
----------------------border-box
`background-clip` 背景剪裁属性是从指定位置开始绘制
background-clip: border-box;============ // 默认值（和上面的不一样，意思是背景从边框开始全覆盖）
background-clip: content-box;--------------------从里面的内容开始才有背景
background-clip: padding-box;------------------从里面的padding就开始铺背景