来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] 刚刚写了篇《CSS变量试玩儿》，我们了解到可以使用原生的CSS来定义使用变量，简化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}
}
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
