20个非常实用的CSS技巧

  border-top:5px solid transparent; /* right arrow slant */  
  border-right:5px solid #2f2f2f; /* bottom, add background color here */  
  font-size:0px;   
  line-height:0px;   
}   
    
/* create an arrow that points right */  
div.arrow-rightright {   
  width:0px;   
  height:0px;   
  border-bottom:5px solid transparent;  /* left arrow slant */  
  border-top:5px solid transparent; /* right arrow slant */  
  border-left:5px solid #2f2f2f; /* bottom, add background color here */  
  font-size:0px;   
  line-height:0px;   
}   
  

17. CSS3 calc() 的使用

calc() 用法类似于函数，能够给元素设置动态的值：

CSS Code复制内容到剪贴板

/* basic calc */  
.simpleBlock {   
  width: calc(100% – 100px);   
}   
    
/* calc in calc */  
.complexBlock {   
  width: calc(100% – 50% / 3);   
  padding: 5px calc(3% – 2px);      margin-left: calc(10% + 10px);   
}   
  

18. 文本渐变

文本渐变效果很流行，使用 CSS3 能够很简单就实现：

CSS Code复制内容到剪贴板

h2[data-text] {   
  position: relative;   
}   
h2[data-text]::after {   
  content: attr(data-text);   
  z-index: 10;   
  color: #e3e3e3;   
  position: absolute;   
  top: 0;   
  left: 0;   
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottombottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}   
  

19. 禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled { pointer-events: none; }

20. 模糊文本

简单但很漂亮的文本模糊效果，简单又好看！