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)下新建 ...
随机推荐
- ansible-介绍
常用自动化运维工具 CFengine Chef Puppet 基于Ruby开发,采用C/S架构,扩展性强,基于SSL认证 SaltStack 基于python开发,采用C/S架构,相对于puppet更 ...
- js 递归的理解
友情提示:阅读本文需花 3分钟左右! 递归函数必须接受参数. (比如我要递归谁?) 在递归函数的定义初始,应该有一个判断条件,当参数满足这个条件的时候,函数停止执行,并返回值.(指定退出条件,否则就会 ...
- day10 Pyhton学习
一.昨日内容回顾 函数: 定义:对功能或者动作的封装 def 函数名(形参): 函数体 函数名(实参) return: 返回,当程序运行到return的时候,终止函数的执行 一个函数一定拥有返回值 ...
- 【思维】UVA 11300 Spreading the Wealth
题目大意 vjudge链接 有n个人围圆桌而坐,每个人有Ai个金币,每个人可以给左右相邻的人一些金币. 若使得最终所有人金币数相等,求最小金币转移数. 数据范围 n<1000001 样例输入 3 ...
- linux(centos8):用fallocate快速生成大文件
一,fallocate的用途? 1,用途 我们有时需要用大文件来测试下载速度, 有时需要用大文件来覆盖磁盘空间, 如果在网上搜索,很多文章讲的是使用dd等工具, 事实上linux系统已经内置了生成大文 ...
- 第二章 OSI参考模型
一.产生背景 1.伴随着计算机网络的飞跃发展,各大厂商根据自己的协议生产出了不同的硬件和软件 2.为了实现网络设备间的互相通讯,ISO和IEEE相继提出了OSI参考模型及其TCP/IP模型 二.OSI ...
- 视频和音频的 DOM
视频和音频的 DOM HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. HTML5 Audio/Video 方法 方法 描述 addTe ...
- Pytest学习（三） - setup和teardown的使用
一.前言 从文章标题可以看出,就是初始化和释放的操作,根据我的java习惯来学习pytest,个人感觉没差太多,理解上也不是很难. 哦,对了,差点跑题了,这个框架是基于Python语言的,在学习的时候 ...
- 010_Markdown学习
目录 Markdown学习 标题 三级标题 四级标题 五级标题 六级标题 字体 引用 分割线 图片 超链接 列表 表格 代码 Markdown学习 标题 三级标题 四级标题 五级标题 六级标题 字体 ...
- JUC---10JMM
前提:什么是Volatile? Java 虚拟机提供轻量级的同步机制 1.保证可见性------->JMM 2.不保证原子性 3.禁止指令重排 一.什么是JMM 1.JMM : Java内存模型 ...