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的含义的更多相关文章

  1. CSS currentColor 变量的使用

    CSS中存在一个神秘的变量,少有人知自然也不怎么为人所用.它就是crrentColor变量(或者说是CSS关键字,但我觉得称为变量好理解些). 初识 它是何物?具有怎样的功效?它从哪里来?带着这些疑问 ...

  2. css+div页面布局

    div标签是html页面中用于分组的块元素,是专门用于元素布局的标签. 标签的级别: 1.行级标签:可设置大小,但一行只能容下一个行级标签(默认宽度==页面宽度,默认高度==填充高度) 2.块级标签: ...

  3. css揭秘

    一:渐变 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向       background: linear-gradient(direction, color-sto ...

  4. 调整markdown css样式

    H1标题 H2标题 H3标题 H4标题 H5标题 H6标题 段落: 世情薄,人情恶.雨送黄昏花易落.晓风干,泪痕残.欲笺心事,独语斜阑.难,难,难! 人成各,今非昨.病魂常似秋千索.角声寒,夜阑珊.怕 ...

  5. PHP求职宝典系列——PHP Web 编程篇

    PHP Web 编程篇 form表单 1.简述 POST 和 GET 传输的最大容量分别是多少? GET 方法提交的表单数据被附加到 URL 上,并作为URL 的一部分发送到服务器端. URL 的长度 ...

  6. [vue案例的知识点]todo-list

    文章的原材料来自于vue的官方示例:https://cn.vuejs.org/v2/examples/todomvc.html,我们在学习过程中,试着对其中的一些知识点进行记录: 一.浏览器数据存储, ...

  7. vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  8. PHP与XML技术

    XML的概述 XML(eXtensibleMarkup Language),扩展性标记语言,它是用来描述其他语言的语言.它允许用户设计自己的标记.XML是由W3C(WorldWide 月发布的一种标准 ...

  9. ThinkPHP框架学习(二)

    在上一节中,我主要讲到了如何获取ThinkPHP框架,以及虚拟目录和虚拟主机的配置.准备工作完成之后,就可以利用ThinkPHP去部署项目了. 先在工作目录(D:/zend/workspace)下新建 ...

随机推荐

  1. BUUCTF_web_三

    下面还是简单web的入门题 [GKCTF2020]cve版签到 这次的比赛最简单的题了吧,提示是CVE-2020-7066,但是网上没有几个关于这个漏洞的相关利用的文章,似乎是get_header() ...

  2. 【应用服务 App Service】NodeJS +Egg 发布到App Service时遇见 [ERR_SYSTEM_ERROR]: A system error occurred:uv_os_get_passwd returned ENOENT(no such file or directory)

    问题情形 本地NodeJS应用使用Egg脚手架构建,本地运行测试完全没有问题,发布后App Service后不能运行.通过登录到kudu后(https://<your web site>. ...

  3. JS实现鼠标移入水波效果

    前言 最近比较沉迷JS,所以我现在来做个鼠标的交互效果 HTML <div style="border-radius;position:relative;width:800px;hei ...

  4. Hive LLAP

    body { margin: 0 auto; font: 13px / 1 Helvetica, Arial, sans-serif; color: rgba(68, 68, 68, 1); padd ...

  5. Vue 学习第二部

    目录 通过axios实现数据请求 json json数据的语法 js中是提供的接送数据转换方法 ajax 数据接口 ajax的使用 同源策略 ajax跨域(跨源)方案之cors 组件化开发 组件[co ...

  6. 基于gin的golang web开发:路由二

    在基于gin的golang web开发:路由中我们介绍了Gin的路由和一些获取链接中参数的方法,本文继续介绍其他获取参数的方法. 文件上传 在web开发中文件上传是一个很常见的需求,下面我们来看一下基 ...

  7. 【总结】mybatis分页(实现 + 原理)

    1.mybatis pageHelper分页实现 (1)引入依赖 (2)配置pageHelper插件 <configuration> <!-- 引入 pageHelper插件 --& ...

  8. Windows 端口被占用,但进程号对应的进程不存在,使用Get-Process来查找进程挺方便的

    Windows上很少安装数据库,这次遇到一个小问题:数据库启动之后提示: 警告: 无法为 "*" 创建监听套接字 致命错误: 无法创建TCP/IP套接字 日志: 数据库系统已关闭 ...

  9. error: invalid command ‘bdist_wheel‘

    解决方法: pip3 install wheel 了解更多,请关注公众号

  10. python数据类型互相转换

    类型转换 关注公众号"轻松学编程"了解更多. 主要针对几种存储工具:list.tuple.dict.set 特殊之处:dict是用来存储键值对的. 1.list 转换为set l1 ...