更多
黑客联盟 黑客软件
学生黑客联盟
您现在的位置:学生黑客联盟 > 编程频道 > WEB前端 > 浏览信息
CSS currentColor研究
时间:2015-03-20 22:05 来源:www.stuhack.com 作者:学盟网
刚刚写了篇《CSS变量试玩儿》,我们了解到可以使用原生的CSS来定义使用变量,简化CSS书写、优化代码的组织与维护,但可怕的兼容性问题,又让我们望而却步、一笑了之。但是有这么一个CSS变量currentColor,兼容良好、功能强大,接下来我们来一探究竟。简介CSS
刚刚写了篇《CSS变量试玩儿》,我们了解到可以使用原生的CSS来定义使用变量,简化CSS书写、优化代码的组织与维护,但可怕的兼容性问题,又让我们望而却步、一笑了之。 但是有这么一个CSS变量currentColor,兼容良好、功能强大,接下来我们来一探究竟。   简介 CSS里已经有一个长期存在的兼容性良好的变量currentColor,表示对当前元素颜色的引用,可以应用在当前元素的其他属性和后代元素上。   h1 {  color: hsl(0,0%,44%);  padding: 1rem;  /* 这里调用默认颜色 */ border-bottom: 4px solid;  } /* 使用currentColor,用在其他属性上 */ h1 {  color: hsl(0,0%,44%);  padding: 1rem;  /* 这里调用默认颜色 */ border-bottom: currentColor 4px solid;  } /* 使用currentColor,用在后代元素上 */ a.blog{    text-decoration: none;   font-weight:bold; } /*设置不同状态颜色*/ a.blog           { color: #900; } a.blog:hover, a.blog:focus     { color: #990; } a.blog:active    { color: #999; } /*设置箭头*/ a.blog:after{   width: 0; height: 0; border: 0.4em solid transparent; border-right: none; content: ''; display: inline-block;   position:relative;   top:1px;   left:2px; } /*设置箭头继承父对象颜色*/ a.blog::after, a.blog:hover::after, a.blog:focus::after, a.blog:active::after {     border-left-color: currentColor; } 我们可以发现,使用currentColor能够大大简化代码书写,优化代码的组织与维护。   实例 为了演示currentColor的应用,我们造了一个案例,参见codepen,大家可以-在线编辑-,-下载收藏-。我们在案例里尝试了currentColor和渐变的结合,和动画的结合,和伪对象元素的结合。 案例演示 html文件放上来,顺便弄点广告哈。 html文件   <h2 class="icon">Let's go to whqet's blog</h2> <p>前端开发whqet,<a class="blog" href="http://blog.csdn.net/whqet/">王海庆的技术博客</a>,关注前端开发,分享相关资源,希望可以对您有所帮助。csdn专家博客http://blog.csdn.net/whqet和个人独立博客http://whqet.github.io同步更新,希望可以得到您的支持与肯定,您的支持是我最大的动力!王海庆,浙江邮电职业技术学院软件技术青椒一枚,其貌不扬、其名不翔,关心技术、热爱生活,我爱<a class="link" href="#">怒放的生命</a>。</p> 然后在CSS中,我们使用-prefix free不再用考虑复杂的浏览器厂商前缀。 这里使用本博文章《苹果风格的下划线》所述效果,利用渐变划线,然后利用text-shadow隔离线条,在渐变里面使用了currentColor.   /*使用googlefont*/ @import url(//fonts.googleapis.com/css?family=Cedarville+Cursive); /*使用渐变划线,利用text-shadow隔离线条*/ h2.icon{   margin:10px 0;   display: inline-block;   font-size:3em;   width:auto;   font-family:Cedarville Cursive;   text-shadow: 2px 0 0 #fff, -2px 0 0 #fff;   color: #000;   background-image: linear-gradient( to right, currentColor 0%, #fff 120% );   background-repeat: repeat-x;   background-position: 0 75%;   background-size: 100% 3px; } 然后,我们探索将currentColor应用到:after元素中去,实现链接装饰元素的颜色与链接元素的绑定。   p{   text-indent: 2em;   line-height: 1.5em; } a.blog,a.link{    text-decoration: none;   font-weight:bold;   position: relative;   margin-right:4px; } /*应用到后代伪类元素*/ a.blog           { color: #900; } a.blog:hover, a.blog:focus     { color: #990; } a.blog:active    { color: #999; }   a.blog::after{   width: 0; height: 0; border: 0.4em solid transparent; border-right: none; content: '';   position:absolute;   right:-6px;   top:2px; }   a.blog::after, a.blog:hover::after, a.blog:focus::after, a.blog:active::after {     border-left-color: currentColor; } 应用到动画元素上的尝试。   /* 结合动画应用 */ a.link{    color: #900;    animation:go 2s infinite; } a.link::before, a.link::after{   content: '';   width:100%; height: 2px; background-color: currentColor; position:absolute;   left:0; } a.link::before{   top:-4px; } a.link::after{   bottom:-4px; } @keyframes go{   0% {color:#900}   33%{color:#090}   66%{color:#009} }


本文标题:CSS currentColor研究

本文地址:http://www.stuhack.com/bc/qianduan/032014205.html

免责声明:本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。




百度钱包“落子

一个商户通过审核入驻百度钱包,将获得百度[查看详细]

移动搜索&发

移动搜索在移动端的创新和颠覆也为百度探索[查看详细]

张向宁:移动互联

张向宁回顾了他2002年提出的“互联网十大预[查看详细]

淘宝开卖二维码门

截至4月20日,淘宝已经售出车展的实体门票[查看详细]

百度钱包杀入移动

“百度钱包”将完成的 “搜索用户”与“消[查看详细]