CSS3色彩关键字currentcolor优化

最新推荐文章于 2023-06-13 17:12:06 发布

c-Tomorrow

最新推荐文章于 2023-06-13 17:12:06 发布

阅读量1.1k

点赞数 2

分类专栏： css、css3 文章标签： CSS3变量 currentcolor currentcolor在颜色上的优化

本文链接：https://blog.csdn.net/c__dreamer/article/details/80470736

版权

css、css3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

currentcolor是CSS3新增的一个可以说是变量的一个值

currentcolor

CSS3新增的色彩关键词，代表“当前的color色彩”。

可以看作为一个变量，能够接受color值定义的地方都可以使用（如：背景色，边框色，阴影色....）。

因为color属性本身具有可继承性，因此currentcolor既可作用域元素本身，也可作用与元素的后代。

应用

最主要的作用：精简代码，优化代码组织与维护：通过设定一个color值，需要与其关联的元素设定为currentcolor，就可控制所有的关联元素的色彩。

常见应用：结合伪对象/结合渐变/结合动画/结合SVG。

currentcolor代码优化

color > 边框 + 盒阴影 + 文本 + 文本阴影

color > 父级 + 子级

下面来个例子体验一下：

div{
	width:200px;
	height:200px;
	margin:10px auto;
}
.div1{
	text-align:center;
	color:green;
	border:1px solid currentcolor;
	border-radius:5px;
	box-shadow: 0 0 5px currentcolor;
}
.div1:hover{
	color:red;
}
</style>
</head>
<body>
	<div class="div1">
		<p>白日依山尽</p>
		<p>黄河入海流</p>
		<p>欲穷千里目</p>
		<p>更上一层楼</p>
	</div>