1.裁剪clip属性-删除其他区域变为透明

    
     
      
      
      
clip属性
 
      
        
       
        必须将position的值设为absolute或者fixed，此属性方可使用。 
       
    
      
     
    

显示效果：

我们的裁剪值顺序是上右下左，那么实现的裁剪就是

上：0-10px (纵坐标)

右：200px-190px（横坐标）

下：200px-190px(纵坐标)

左：0-10px（横坐标）

最后就是我们看见的绿色区域，说明上使用此属性必须是有absolute或者fixed的设置。

针对ie6 7的兼容写法：

*clip:rect(10px,190px,190px,10px);

用逗号分隔。

2.圆角border-radius属性-水平垂直分别定义

    
     
      
      
      
圆角border-radius属性
 
      
        
       
    
      
     
    

复合属性，可以同时对4个定义，也可以分开处理。

效果：

我们每个角用一个值代表水平和垂直半径相同，我们可以对一个角定义不同的水平垂直半径。写法是在值之间/分开：

    
     
      
      
      
圆角border-radius属性
 
      
        
       
    
      
     
    

效果：

 

3.背景裁剪background-clip属性-字体以外被裁剪

    
     
      
      
      
背景裁剪background-clip属性
 
      
        
       
        我是字体
       
    
      
     
    

效果：

这个属性在谷歌有效，需要写前缀，我们发现除了字体，绿色背景全被裁剪了，

我们如果把字体设置为透明，背景改为渐变色，我们就做出渐变字体了。

4.字体颜色color 属性-字体颜色设置为透明看见背景色

    
     
      
      
      
字体颜色color属性
 
      
        
       
        我是字体
       
    
      
     
    

效果：

 

5.边框border属性-设置为透明实现三角形

    
     
      
      
      
边框border属性-设置为透明实现三角形
 
      
        
       
        三角
       
    
      
     
    

效果：

我们把宽高设置为0；然后对边框的颜色右，下设置为透明，这样就出现的如图的黑色三角形，还可以其他设置方式。

 

总结一次，针对颜色设置为透明，可以实现很多的小效果！

 

6.文字空隙letter-spacing属性和单词空隙word-spacing属性

    
     
      
      
      
文字空隙letter-spacing属性和单词空隙word-spacing属性
 
      
        
       
             
        
         我是你
         
        
         
          我是你
          
        
          
           i love you
           
        
           
            i love you
            
    
           
          
         
        
       
    
      
     
    

效果：

对比非常明显！

7.white-space属性-实现文字强制不换行

    
     
      
      
      
white-space属性-实现文字强制不换行
 
      
        
       
             white-space属性-实现文字强制不换行    
       
    
      
     
    

效果：

 height:200px; line-height:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

这些可以为这个效果实现都要写的属性。

7.content属性-实现内容插入

    
     
      
      
      
content属性-实现内容插入
 
      
        
       
                 
       
    
      
     
    

效果：

这个属性一般结合::beforeh和::after为对象处理，插入了内容和定义样式。

我们在预设清除浮动也利用了为对象的处理，在最后插入内容去clear。

8.writing-mode属性-实现文字排版方式

    
     
      
      
      
writing-mode属性-实现文字排版方式
 
      
        
       
             我是很好的，非常的开心    
       
    
      
     
    

效果：

垂直排列，右侧起始。

    
     
      
      
      
writing-mode属性-实现文字排版方式
 
      
        
       
             我是很好的，非常的开心    
       
    
      
     
    

效果：

垂直左侧起始，默认水平不做演示。