CSS currentColor研究_html/css_WEB-ITnose
刚刚写了篇《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 id="Let-s-go-to-whqet-s-blog">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}}
深入
本文的写作过程大量参考了以下文章,大家可以仔细阅读下面文章获得更深的体会。
致谢

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati
