css3新特性--CSS Backgrounds and Borders Module

CSS Backgrounds and Borders Module 是基于css 2.1 扩展的。

background

1. background-image

   background-image的支持使用多张图片，第一个张图片显示在最上面，会覆盖后面的图片，层级最高，之后依次次之。

   background-image:
   	linear-gradient(45deg, red, blue),
   	linear-gradient(45deg, aqua, green);
   

2. backgroud-repeat

   backgroud-repeat 值为水平和垂直2个方向组成。

   backgroud-repeat: <水平指定值> <垂直指定值>
   
   /*
        默认值 repeat
        相当于 backgroud-repeat: repeat repeat 简写
   */
   backgroud-repeat: repeat 
   
   /*   相当于 backgroud-repeat: repeat no-repeat 简写  */
   backgroud-repeat: repeat-x
   
   /*   相当于 backgroud-repeat: no-repeat repeat 简写  */
   
   backgroud-repeat: repeat-y
   
   /*   相当于 backgroud-repeat: no-repeat no-repeat 简写  */
   backgroud-repeat: no-repeat 
   
   /*
        新增
        相当于 backgroud-repeat: space space 简写
        会根据容器大小计算重复次数，将容器空间平均分给图片。
        space会忽略background-position
   */
   backgroud-repeat: space
   
   /*
        新增
        相当于 backgroud-repeat: space space 简写
        会根据容器大小计算重复次数，将图片拉伸后填入容器。
        space会忽略background-position
   */
   backgroud-repeat: round
   

3. background-clip 背景裁剪

   background-clip: border-box /* 默认值 */
   background-clip: padding-box 
   background-clip: content-box
   

注：边框颜色是因为背景重复、背景起点

4. background-origin 背景起点

   background-clip: padding-box /* 默认值 */
   background-clip: border-box 
   background-clip: content-box
   

   background-attachment 为 fixed 时, background-origin无效。

5. background-size 背景大小

   background-size: auto /* 默认值 */
   background-size: contain /* 将背景图拉伸至完全显示图片 */
   background-size: cover /* 将背景图拉伸至完全覆盖容器 */
   background-size: length-percentage
   

6. background-attachment 背景附着

   background-attachment: scroll /* 默认值 跟随元素滚动*/
   background-attachment: fixed /* 固定在视口 */
   background-attachment: local /* 新增,跟随内容滚动 */
   

7. background-position

   没有改变，略。

boder-radius

圆角,用的比较多，简单的讲一下

/* 完全体 8 个值 */
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px
/* 简写 */
border-radius: 10px 10px 10px 10px / 10px 10px
border-radius: 10px 10px 10px 10px
border-radius: 10px

不过有3点需要注意的：

boder-image

边框使用图片来绘制，文档有有讲到 border-image 会代替 border-style 来绘制，所以使用 border-image 之前要先设置 border-style。

1. border-image-source 图片源

   border-image-source: url(...)
   

2. border-image-slice 图片裁剪

   /*   值由4个方向 + 中央填充组成 */
   border-image-slice: top right bottom left fill
   
   /*   fill 可以不写 */
   border-image-slice: top right bottom left
   
   /*   4个方向简写参与 margin 和 padding*/
   border-image-slice: top&bottom right&left
   
   /*   方向值可以是百分比， 默认 100% */
   border-image-slice: 50% 50%
   /* 
        方向值可以是数值，不能加单位
        如果是位图，单位为px
        如果是矢量图，单位为坐标系
   */
   border-image-slice: 50 50
   

3. border-image-width 边框大小

   指定 border-image 渲染范围，不会改变盒模型大小，默认值 1

4. border-image-outset 图片偏移

   指定 border-image 的偏移量

5. border-image-repeat

   指定 2、4、6、8 这些区块的重复方式，有 stretch、repeat、round、space 四种值。

   1、3、7、9 不能设置，默认拉伸

所有的css3特性都会更新在这里总集篇