帮助
|
留言交流
|
首 页
阅览室
馆友
我的图书馆
来自:
小强不死520
>
馆藏分类
配色:
字号:
大
中
小
currentColor在CSS的含义
2020-10-12 | 阅:
转:
|
分享
currentColor在CSS的含义
作者:请叫我二狗哥
currentColor属于CSS中的一个变量,当然也有人称之为CSS的自定义属性,其代表“当前颜色”。
在CSS中设置了color的值后,相应CSS代码块(由两个花括号包裹的内容)中出现currentColor即引用的color属性值。对于需要设置多个相同颜色值的CSS代码而言,通过currentColor可以实现后期对CSS代码便捷地修改维护。
如下图所示的两个不同颜色的示例按钮,可通过currentColor轻松实现。
HTML代码:
SS代码:
????????.button?{
????????????color:blue;
????????????border:?1px?solid?currentColor;
????????????box-shadow:?1px?1px??2px?currentColor;
????????}
????????.red{
????????????color:red;
????????}
currentColor可以使用此值指示要将颜色值用于接受颜色值的其他属性:边框(border)、框阴影(box-shadow)、轮廓(outline)或背景(background)。
currentColor在使用时需要注意:
一、currentColor具有跟随瀑布流的特点,它是以元素真实‘当前颜色’作为颜色值进行渲染的。
????????body{
????????????color:aqua;
????????}
????????div?{
????????????border:?1px?solid?currentColor;
????????????box-shadow:?1px?1px??2px?currentColor;
????????????/?外围样式/
????????????width:300px;
????????????font-size:20px;
????????????padding:?.3em?.8em;
????????}
HTML代码:
二狗哥
浏览器实际展示效果:
由于div标签继承了body的color属性值,此时的currentColor实际值为aqua。
思考练习:如果将div标签设置为
并将CSS中标记为
??.button{
????????????border:?1px?solid?currentColor;
????????????box-shadow:?1px?1px??2px?currentColor;
????????????/?外围样式/
????????????width:300px;
????????????font-size:20px;
????????????padding:?.3em?.8em;
????????}
Input标签中的currentColor实际值是多少呢,不妨实际动手试试吧?看看是否和你预想的效果一致,若不一致是什么原因?
二、currentColor为CSS中的真实颜色值。
还是文章开始的按钮设置,若CSS设置为如下方式:
????????.button?{
????????????color:blue;
????????????border:?1px?solid?currentColor;
????????????box-shadow:?1px?1px??2px?currentColor;
color:black;
????????}
因为在CSS规则后,重复的属性设置以后设置为最终值,所以实际在浏览器中按钮相应的currentColor颜色都会为black,而不是先为蓝色后为黑色。
作者:请叫我二狗哥
献花(
0
)
+1
(本文系
小强不死520...
首藏
)
类似文章
更多
CSS 颜色体系详解
css代码兼容浏览器技巧总结
纯css改变复选框样式
CSS3 经典教程系列
div+css实现网页上下左右滚动条代码
div显示滚动条和控制滚动条属性的css代码
在线设置日志滚动条
22个CSS黑魔法
百度空间CSS代码精选
发表评论: