加入收藏 | 设为首页 | 会员中心 | 我要投稿 云计算网_泰州站长网 (http://www.0523zz.com/)- 视觉智能、AI应用、CDN、行业物联网、智能数字人!
当前位置: 首页 > 服务器 > 系统 > 正文

20个非常实用的CSS技巧

发布时间:2020-03-16 06:49:47 所属栏目:系统 来源:站长网
导读:副标题#e# 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? CSS Code复制内容到剪贴板 img.desaturate{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(1

  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;   

(编辑:云计算网_泰州站长网)

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

热点阅读