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)下新建 ...
随机推荐
- 收集的照片信息都是Excel超链接？批量命名很困难？来试试这个自制的下载器吧！
项目背景 作为大学的一名班委,经常要制作各种表格.统计各种信息,成为一名合格的"表哥"是一门必修课.其实Excel的文字信息和数字信息的统计和处理还并不算难题,很多信息可以通过问卷 ...
- 代码格式化工具:clang-format
IDE: Visual Studio Code Language: C/C++ 格式化工具: clang-format 安装 vscode安装扩展C/C++,扩展程序将自动安装clang-format ...
- AMBuild
什么是AMBuild? AMBuild是构建软件项目和创建发布包的工具.它是针对C++项目的,当然也可以用于其它任何语言的项目,它主要针对解决大多数构建工具所解决不了的三个大问题: 1.准确性:不需要 ...
- Sqlite嵌入式数据库讲解
在计算机系统中,保存数据的方式一般有两种:1. 普通文件方式2. 数据库方式 相比于普通文件方式,使用数据库来管理大批量数据具有更高的效率与安全性. 数据库系统一般由3个部分构成1. 数据库2. 数据 ...
- 以太坊blockchain源码分析
blockchain关键元素 db:持久化到底层数据储存,即leveldb: genesisBlock:创始区块 currentBlock:当前区块,blockchain中并不是储存链所有的block ...
- 数据查询语句：DQL（Data Query Language）
一.基础查询 1.语法:select 查询列表 from 表名; 2.特点:1.通过select查询完的结果,是一个虚拟的表格,不是真实存在 2.查询列表可以是:字段.表达式.常量.函数等 3 ...
- poj1655 Balancing Act (dp? dfs?)
Balancing Act Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14247 Accepted: 6026 De ...
- git学习(二) git的文件状态
git的文件状态 用于查看git的状态 git status 用于git文件的删除操作 git rm 如果只是 git rm --cache 仅删除暂存区里的文件: 如果不加--cache 会删除工作 ...
- 解谜：为何用了9-Patch背景图后自带Padding属性？
本次分享的主题源于笔者在实际开发中遇到的问题. 具体现象为:当普通的9-Patch图用作TextView的backGround属性后,整个TextView便有了一定的Padding值.但笔者并没有给定 ...
- 开发笔记：PDF生成文字和图片水印
背景 团队手里在做的一个项目,其中一个小功能是用户需要上传PDF文件到文件服务器上,都是一些合同或者技术评估文档,鉴于知识版权和防伪的目的,需要在上传的PDF文件打上水印, 这时候我们需要提供能力给客 ...