CSS3之边框内容

边框圆角

属性名：border-radius

单个属性：水平距离 垂直距离
border-radius-top:60px 60px
border-radius-bottom:60px 60px
border-radius-left:60px 60px
border-radius-right:60px 60px

---

复合写法：
border-radius:60px 60px 60px 60px /60px 60px 60px 60px ;

---

四个角半径相同：
border-radius:60px;

---

四个角半径不同且每个角的水平距离和垂直距离相同:
border-radius:60px 70px 50px 80px;

---

如果只写三个值，则缺失数据的那角与其对角数据相同
border-radius:60px 70px 50px

---

赋值顺序：
从左上开始，顺时针赋值

注意：图片也可以使用圆角

盒子阴影

属性名：box-shadow

box-shadow:属性一 属性二 属性三 属性四 属性五
属性一：水平位置，向右为正
属性二：垂直位置，向下为正
属性三：模糊程度，已“px”为单位，值越大越模糊
属性四：阴影大小，同样以”px”为单位，一般为3px
属性四：阴影颜色
属性五：设置外/内阴影，默认外阴影

边框图片

属性名：border-img

border-image-source:url() //图片路径
border-image-slice //图片边框裁剪
border-image-width //图片边框宽度
border-image-repeat:

repeat //正常平铺，但可能显示的不完整
round //平铺，保证边框图片的完整性
stretch //拉伸显示（默认）

---

连写
border-img:source slice width repeat