currentColor在CSS的含义
currentColor属于CSS中的一个变量，当然也有人称之为CSS的自定义属性，其代表“当前颜色”。
在CSS中设置了color的值后，相应CSS代码块（由两个花括号包裹的内容）中出现currentColor即引用的color属性值。对于需要设置多个相同颜色值的CSS代码而言，通过currentColor可以实现后期对CSS代码便捷地修改维护。
如下图所示的两个不同颜色的示例按钮，可通过currentColor轻松实现。
HTML代码：
<input class='button' type='button' value='二狗哥'>
<input class='button red' type='button' value='二狗哥'>
CSS代码：
.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代码：
<body>
<div>二狗哥</div>
</body>
浏览器实际展示效果：
由于div标签继承了body的color属性值，此时的currentColor实际值为aqua。
思考练习：如果将div标签设置为
<input class='button' type='button' value='二狗哥'>
并将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，而不是先为蓝色后为黑色。
currentColor在CSS的含义的更多相关文章
- CSS currentColor 变量的使用
CSS中存在一个神秘的变量,少有人知自然也不怎么为人所用.它就是crrentColor变量(或者说是CSS关键字,但我觉得称为变量好理解些). 初识 它是何物?具有怎样的功效?它从哪里来?带着这些疑问 ...
- css+div页面布局
div标签是html页面中用于分组的块元素,是专门用于元素布局的标签. 标签的级别: 1.行级标签:可设置大小,但一行只能容下一个行级标签(默认宽度==页面宽度,默认高度==填充高度) 2.块级标签: ...
- css揭秘
一:渐变 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 background: linear-gradient(direction, color-sto ...
- 调整markdown css样式
H1标题 H2标题 H3标题 H4标题 H5标题 H6标题 段落: 世情薄,人情恶.雨送黄昏花易落.晓风干,泪痕残.欲笺心事,独语斜阑.难,难,难! 人成各,今非昨.病魂常似秋千索.角声寒,夜阑珊.怕 ...
- PHP求职宝典系列——PHP Web 编程篇
PHP Web 编程篇 form表单 1.简述 POST 和 GET 传输的最大容量分别是多少? GET 方法提交的表单数据被附加到 URL 上,并作为URL 的一部分发送到服务器端. URL 的长度 ...
- [vue案例的知识点]todo-list
文章的原材料来自于vue的官方示例:https://cn.vuejs.org/v2/examples/todomvc.html,我们在学习过程中,试着对其中的一些知识点进行记录: 一.浏览器数据存储, ...
- vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- PHP与XML技术
XML的概述 XML(eXtensibleMarkup Language),扩展性标记语言,它是用来描述其他语言的语言.它允许用户设计自己的标记.XML是由W3C(WorldWide 月发布的一种标准 ...
- ThinkPHP框架学习（二）
在上一节中,我主要讲到了如何获取ThinkPHP框架,以及虚拟目录和虚拟主机的配置.准备工作完成之后,就可以利用ThinkPHP去部署项目了. 先在工作目录(D:/zend/workspace)下新建 ...
随机推荐
- docker容器命令2
docker容器命令2 启动守护式容器 docker run -d 镜像名字 [root@tzh ~]# docker images REPOSITORY TAG IMAGE ID CREATED S ...
- 题解：CF593D Happy Tree Party
题解:CF593D Happy Tree Party Description Bogdan has a birthday today and mom gave him a tree consistin ...
- 例题4-2 刽子手游戏（Hangman Judge, UVa 489）
#include<stdio.h> #include<string.h> int ok ,no; int left ,chance; char s[20] ,s2[20]; v ...
- pytest文档52-命令行参数--setup-show查看fixture的执行过程
前言 使用命令行运行 pytest 用例的时候,看不到 fixture 的执行过程. 如果我们想知道fixture的执行过程和先后顺序,可以加上 --setup-show 命令行参数,帮助查看 fix ...
- 【Targan+LCA】HDU 3686 Traffic Real Time Query
题目内容 洛谷链接 给出一个\(n\)个节点,\(m\)条边的无向图和两个节点\(s\)和\(t\),问这两个节点的路径中有几个点必须经过. 输入格式 第一行是\(n\)和\(m\). 接下来\(m\ ...
- go http爬虫
1 package main import ( "fmt" "io/ioutil" "net/http" ) func main() { r ...
- __getattr__和__setattr__
getattr 拦截运算(obj.xx),对没有定义的属性名和实例,会用属性名作为字符串调用这个方法 class F(object): def __init__(self): self.name = ...
- win安装appium
Windows 下配置 Appium,要提前装好jdk,请参考:https://jingyan.baidu.com/article/e8cdb32b2699cb37042bad59.html 1.下载 ...
- 通过IIS部署，将图片或者视频等文件用http协议网址访问
打开IIS管理器 又键点击添加网站 然后到这个界面 文件夹里有这些图片,随便用的一些图片 然后我这里用的是局域网测试,所以IP就是wifi的IP地址,如果是服务器的话,直接选服务器本身的IP地址就行了 ...
- 常见ascii码记忆
常见字符的ASCII码值如下:空格的ASCII码值为32:数字0到9的ASCII码值分别为48到57:大写字母"A"到"Z"的ASCII码值分别为65到90:小 ...