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; (编辑:云计算网_泰州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |