css 边框和圆角

CSS3圆角
    border-radius属性
        一个最多指定四个border -*- radius复合属性，这个属性允许你为元素添加圆角边框
    语法
        border-radius:1-4 length|% /1-4 length|%
    兼容：IE9+ FireFox4+ Chrome Safari5+ Opera
    补充 单位 px em rem vm
          em是相对单位 以浏览器的默认字体为1em
          vm
          10% 代表圆角的高是框的的高度的10%，圆角的长是框长度的10%，由于长和高不同，会导致圆角变形
          50% 长是高的2倍时会得到一个椭圆，长和高相等时会得到一个圆 超过50%后得到的效果是一样的
    Css3指定每一个圆角
        多值
            四个值 左上角 右上角 右下角 左下角 从左上角开始顺时针依次为四个值
            三个值 1 左上角 2右上角和左下角（对角线） 3右下角
            两个值 1左上角和右下角 2右上角和左下角（对角线）
            一个值：四个圆角值相同
        属性
            border-top-left-radius:10px; 左上
            border-top-right-radius: 20px; 右上
            border-bottom-left-radius: 30px; 左下
            border-bottom-right-radius: 50px; 右下
    实例
            <style>
                div{
                    width: 500px;
                    height: 300px;
                    border: 2px solid black;
                    -webkit-border-radius:50% ;
                    -moz-border-radius:50% ;
                    -ms-border-radius:50% ;
                    -o-border-radius:50% ;
                    -border-radius:50% ;
                }
                为了兼容性将浏览器前缀加上
                webkit-border-radius:50% ; 火狐
                -moz-border-radius:50% ;谷歌
                -ms-border-radius:50% ;IE
                -o-border-radius:50% ;Opera
                -border-radius:50% ; 如果识别这个就不在识别前边的就会将前边的覆盖
CSS3盒阴影
    box-shadow 设置一个或多个下拉阴影的框
    语法
        box-shadow:h-shadow v-shadow blur spread color inset;
        h-shadow:水平方向偏移量
        v-shadow;竖直方向偏移量
        blur： 模糊多少 不可以有负值
        spread： 扩展多少
        color： 阴影颜色
        inset：外阴影还是内阴影 可以有负值
    兼容：IE9+ FireFox4+ Chrome Safari5+ Opera
CSS3边界图片
    border-image-* 构建美丽的可扩展按钮
    语法
        border-image:source slice width outset repeat
    兼容性IE9不兼容 FireFox4+ Chrome Safari6+ Opera不兼容
    border-image-source:none|url("image.png")
    border-image-slice:number|%|fill; 图片的边界向内偏移
        点九切图法 默认是不要中间那块9那个部分，如果是fill的话中间的也会要
        1     5     4

        8     9     6

        2     7     3
    border-image-width:number|%|auto 图片边界的宽度 auto：自动
    border-image-outset:length|number 边框外部绘制border-image-area（区域）的量
    border-image-repeat:stretch|repeat|round|initial|inherit;
    图像边界是否应重复（repeated）、拉伸（stretched）、铺满（rounded）
    initial读取默认值 默认值是stretched
    inherit继承父元素