20个非常实用的CSS技巧

  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. 模糊文本

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

CSS Code复制内容到剪贴板

.blur {   

   color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!