CSS currentColor研究_html/css_WEB-ITnose-html教程-PHP中文网

CSS currentColor研究_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:49:17

原创

1746人浏览过

刚刚写了篇《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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1665">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680293663484.png" alt="AI智研社">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1665">AI智研社</a>
                            <p>AI智研社是一个专注于人工智能领域的综合性平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AI智研社">
                                <span>15</span>
                            </div>
                        </div>
                        <a href="/ai/1665" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AI智研社">
                        </a>
                    </div>

登录后复制

然后在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}}

登录后复制