07、CSS3新增边框属性

CSS边框属性复习

border: 宽度 类型 颜色 小数不支持
    border-width：边框的宽度    thin 细的  
        medium 默认的
        thick 粗的
        不常用：数值px
    border-style:none 没有边框 = hidden（用于表格除外，用来解决表格边框冲突）
        solid 实线型 
        dotted 点状 
        dashed 虚线 
        double 双线
    border-color:十六进制 #fff  transparent 透明
        border: 1px solid #000;
        border-top: 1px solid #000;上边框
        border-top-width
        border-top-style
        border-top-color
        border-right：
        border-bottom:
        border-left:

CSS3新增边框属性

border-image:  使用图片来填充边框
    border-image-source:图片的来源，路径
    border-image-slice：图片的分割方式
    border-image-width：图片的宽度(不计算在盒子模型宽高内,谷歌会自动加3px)
    border-image-outset：图片扩展
    border-image-repeat：图片重复

    border-image-source:图片的来源，路径
        none   没有图片
        url()     图片路径

    border-image-slice：图片的分割方式
        从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill。 
        取值：
            number： 边框宽度。不允许负值。 
            %： 用百分比指定宽度。不允许负值。
            border-image-slice:20 fill;

    border-image-width:
        具体长度或浮点数值
        百分比
        auto 此情况下与border-image-slice相同
    注:此值的大小不会累加到盒子模型之上，chrome会有3px的大小，其余浏览器border的大小依然为0

    border-image-outset: 图片向外扩展的数值
        具体长度或浮点数值

    border-image-repeat:
        stretch： 拉伸方式来填充边框背景图。 
        repeat： 平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。 
        round： 平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
        space： 平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

border-radius:  边框圆角属性
    border-top-left-radius
    border-top-right-radius
    border-bottom-right-radius
    border-bottom-left-radius