在css中如何用currentColor关键字_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

在css中如何用currentColor关键字

2025-10-15

浏览次数：次

返回列表

currentColor 关键字用于引用元素的 color 属性值，可使边框、阴影、SVG 图标及伪元素等样式与文字颜色保持一致，减少重复定义，提升维护性。

在css中如何用currentcolor关键字

在 CSS 中，currentColor 是一个非常实用的关键字，它代表当前元素的 color 属性值。使用它可以让你的样式保持一致，尤其是在处理图标、边框、阴影等需要与文字颜色统一的设计时。

currentColor 的基本用法

当你设置某个属性为 currentColor 时，它会自动获取元素 color 属性的值。例如：

.example {
  color: blue;
  border: 2px solid currentColor; /* 边框颜色也是蓝色 */
  fill: currentColor;             /* SVG 填充颜色也是蓝色 */
  stroke: currentColor;           /* SVG 描边颜色也是蓝色 */
}

在这个例子中，边框、填充和描边都会继承 color: blue 的颜色。

在 SVG 图标中的实际应用

很多项目中使用内联 SVG 图标，通过 currentColor 可以让图标跟随文本颜色变化：

.icon {
  color: green;
}
<p>.icon svg {
width: 24px;
height: 24px;
fill: currentColor;    /<em> 图标填充色等于 color </em>/
stroke: currentColor;  /<em> 如果有描边也一样 </em>/
}</p>

这样无论把 .icon 的 color 设成什么颜色，图标都会自动匹配，无需额外定义颜色。

传媒公司模板(RTCMS)1.0

传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://

0 查看详情传媒公司模板(RTCMS)1.0

用于阴影或伪元素保持一致性

如果你想让文本阴影或 ::before / ::after 伪元素的颜色和文字一致，也可以用 currentColor：

.highlight {
  color: red;
  text-shadow: 0 1px 2px currentColor;
}
<p>.bullet::before {
content: "• ";
color: currentColor; /<em> 和父元素文字颜色相同 </em>/
}</p>