CSS3 新特性总结

1.边框

  border-radius: 1-4 length|% / 1-4 length|%;

    每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。若省略左下角,和右上角相同,省略右下角,左上角相同,省略右上角,和左上角相同。

    border-top-left-radius: 20px 50px;

     

  box-shadow: h-shadow v-shadow blur spread color inset;

    h-shadow  水平阴影位置,允许负值。必需

    v-shadow  垂直阴影位置,允许负值。必需

    blur  模糊距离

    spread  阴影大小

    color  阴影颜色

    inset  从外层的阴影改变阴影内测阴影

    box-shadow: 10px 10px 5px 5px #dddddd;

      

 

 

 

   border-image: source slice width outset repeat|initial|inherit;

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

      用于指定要用于绘制边框的图像

    border-image-slice: number | % | fill;

      number  数字表示图像的像素或向量的坐标

      %  百分比图像的大小是相对的:水平偏移图像的宽度,垂直偏移图像的高度

      fill  保留图像的中间部分

      指定顶部,右,底部,左边缘的图像向内偏移,分为九个区域:四个角,四边和中间。图像中间部分将被丢弃(完全透明的处理),除非填写关键字。

       如果省略第四个,它和第二个相同,省略第三个,它和第一个相同,省略第二个,它和第一个相同

    border-image-width: number | % | auto;

      图像边界宽度,四个值用于吧border图像区域分为九个部分。代表上,右,底部,左,两侧向内距离。若第四个值被省略,他和第二个是相同的,

       第三个省略,和第一个是相同的。如果也省略了第二个,他和第一个是相同的。不允许拥有负值

    border-image-outset: length | number; 

      指定在边框外部绘制 border-image-area 的量,包括上下部和左右部分,若第四个值被省略,他和第二个是相同的,第三个省略,和第一个是相同的。

       如果也省略了第二个,他和第一个是相同的。不允许拥有负值

    border-image-repeat: stretch | repeat | round | initial | inherit;

      stretch  默认值。拉伸图像来填充区域

      repeat  平铺图像来填充区域

      round  类似repeat。如果无法完整平铺所有图像,则对图像进行缩放以适应区域

      space  类似repeat。如果无法完整平铺所有图像,扩展空间会分布在图像周围

      initial  将此属性设置为默认值

      inherit  从父元素中继承该属性

  

2.背景

  background-image  添加背景图片

  background-size  背景图片的大小

  background-origin  指定了背景图像的位置区域

 

    

 

   background-clip  背景剪裁属性是从指定位置开始绘制

    border-box  默认值。

    padding-box

    content-box

 

 

 

3.渐变

   可以再两个或多个指定的颜色之间显示平稳的过渡

  线性渐变(Linear Gradients)  向下/向上/向左/向右/对角方向

  径向渐变(Radial Gradients)  由它们的中心定义

 

Tags: