20个非常实用的CSS技巧(5)

  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;   

（编辑：ASP站长网）