如何用CSS获取CSS属性？实现hover元素外框与边框同色

你遇到的问题核心是：CSS的attr()函数目前只能读取HTML元素的属性值（比如data-*这类自定义属性），无法直接获取元素已声明的CSS属性值，这是当前CSS规范的限制，所以用attr(border-color)是行不通的。

下面给你两种实用的解决方案：

方案1：使用CSS自定义属性（变量） #

这是最灵活通用的方法，把边框颜色存储在自定义变量中，hover时直接引用该变量：

button {
  /* 定义存储边框颜色的自定义变量 */
  --element-border-color: green;
  border: 1px solid var(--element-border-color);
}

.hover_effect:hover {
  /* 直接引用变量，保证outline颜色与边框一致 */
  outline: 2px solid var(--element-border-color);
}

后续如果要修改边框颜色，只需要更新--element-border-color的值，outline颜色会自动同步，维护起来非常方便。

方案2：使用currentColor（适用于边框颜色基于元素color属性的场景） #

如果你的元素边框颜色是继承自自身的color属性（比如用border: 1px solid;省略颜色值，默认会用color的值），可以直接用currentColor：

button {
  color: green;
  border: 1px solid; /* 省略颜色时，默认使用currentColor（即color属性的值） */
}

.hover_effect:hover {
  outline: 2px solid currentColor;
}

currentColor是CSS的特殊关键字，会自动引用当前元素的color属性值，适合边框颜色和文字颜色一致的场景。

内容的提问来源于stack exchange，提问作者Sten