currentColor当前色丨技术开发分享录

currentColor当前色

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"currentColor会继承父级的颜色样式,不论是color、background-color、border-color都会继承父级的color色值,如果父级没有color样式,会逐级向上查找,直到html根节点,还没有话,就使用浏览器默认颜色。\n\nMDN上说明 :\n\n> currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上,或者嵌套元素的其他属性上。\n\n标签:\n\n~~~\n<a href=\"##\" class=\"link\"><i class=\"icon\"></i>返回</a>\n~~~\n\n样式:\n\n~~~\n.link:hover {\n\t\tcolor: #333;\n}\n.icon {\n\tdisplay: inline-block;\n\twidth: 300px; \n\theight: 180px;\n\tbackground: url('images/zhaoliying.png') no-repeat center;\n\tborder: 10px solid currentColor;\n}\n~~~\n\n效果:\n\n![](https://box.kancloud.cn/44a9018408b6a9c6172ee00e60776af7_718x257.jpg)\n\n后面写一些transition效果可以合理使用一下,挺不错的。"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看