一、线性渐变

在CSS中部分属性需要添加浏览器前缀

-moz-:表示火狐内核浏览器

-webkit-:表示谷歌内核浏览器

-ms-:表示IE内核浏览器

-o-:表示欧朋(opera)内核浏览器

     
      普通线性渐变
      
       角度线性渐变
       
        重复线性渐变
       
      
     

二、径向渐变

     
      普通径向渐变
      
       指定形状的径向渐变
       
        重复径向渐变
       
      
     

三、倒影

 box-reflect：none | <direction> <offset>? <mask-box-p_w_picpath>?

    <direction> = above | below | left | right

    <offset> = <length> | <percentage>

    <mask-box-p_w_picpath> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

    默认值：none

    适用于：所有元素

    继承性：无 

取值：

    none：无倒影

    <direction>　Demo: 简单图片倒影 See with Webkit

    above：指定倒影在对象的上边

    below：指定倒影在对象的下边

    left：指定倒影在对象的左边

    right：指定倒影在对象的右边

    <offset>　Demo: 图片与倒影间隔 See with Webkit

    <length>：用长度值来定义倒影与对象之间的间隔。可以为负值

    <percentage>：用百分比来定义倒影与对象之间的间隔。可以为负值

    <mask-box-p_w_picpath>　Demo: 更真实的图片倒影 文字倒影与渐变 See with Webkit

    none：无遮罩图像

    <url>：使用绝对或相对地址指定遮罩图像。

    <linear-gradient>：使用线性渐变创建遮罩图像。

    <radial-gradient>：使用径向(放射性)渐变创建遮罩图像。

    <repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像。

    <repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像。

.div6{-webkit-box-reflect:below 1px -webkit-linear-gradient(top,transparent 50%,#F00);}
     
      
     

四、旋转(transform)    transform:rotate(45deg);  旋转45度角，旋转中心在盒子的中心点    transform-origin:0 0;   指定旋转中心

立方体旋转实例

     	
      
       1    
       
        2	
        
         3    
         
          4    
          
           6    
           
            7
           
          
         
        
       
      
     

五、用户界面

    resize  设置用户可否调整盒模型宽高

resize:none  不允许用户调整高宽

resize:both  允许用户调整高和宽

resize:horizontal 允许用户调整宽度

resize:vartical  允许用户调整高度

user-select:none  不允许用户选择文本

鼠标指针

    cursor:pointer  手型

六、过度(transition)

    transition:background-color 1s ease-in 0.5s

第一个参数表示过度的属性，取值可以是单个属性也可以是none 不指定过度属性，all表示所有属性

第二个参数表示过渡时间

第三个参数表示过渡类型  linear(线性过渡)|ease(平滑过渡)|ease-in(由慢到快)|ease-out（由快到慢）

第四个参数表示延迟时间

七、动画(animation)

animation:yidong 2s ease-in 0.5s infinite reverse

第一个参数动画名称

第二个参数动画持续多长时间

第三个参数过渡类型

第四个参数延迟时间

第五个参数循环次数

第六个参数是否反向运动  reverse反方向运动|alternate 先正常运行，然后在反向交替运行

            alternate-reverse先反向运行在正常运行然后交替运行

-webkit-@keyframe yindong{

    from{}

    to{}

}

实例

     
      .ani{	width:200px;height:80px;background:#666;	font-size:14px;		animation:yidong 5s ease-out  infinite alternate;		}@-webkit-keyframes yidong{	from{opacity:0;}	to{opacity:1;	transform:translate(20px);}	}
      
       这是一个动画
      
     

七、多列

column:120px 3   120表示每列的宽  3表示总的列数

column-rule:dashed 5px blue

column-gap:10px   列之间的距离

column-fill:auto   以最高一列的高度为基准