您可能不需要设置边框颜色

您可能不需要设置边框颜色

我们可以使用border-color的初始值“currentColor”

前言

当我们需要完成在元素悬停时自动更改边框颜色和文本颜色的功能时，您是否编写过这段代码：

 // html代码  
 <button>点我</button> // CSS 代码  
 按钮 {  
 颜色：#000；  
 边框：1px 实心#000；  
 }  
 按钮：悬停{  
 颜色：#3370ff；  
 边框颜色：#3370ff；  
 }

这段代码可以正常工作，我总是在我的项目中使用它们。当我们得到问题的解决方案时，总是以这种方式使用它，因为我们可能不知道有更好的方法。是的，有一个更简单的方法来完成这个功能：

 // CSS 代码  
 按钮 {  
 颜色：#000；  
 边框：1px 实心；  
 }  
 按钮：悬停{  
 颜色：#3370ff；  
 }

上面的代码效果是一样的，你可以在上面测试一下 Codepen.io ：

你对这段代码感到困惑吗？在本文中，我们将了解我们不需要设置边框颜色的原因。

边界属性

这 边界 属性设置元素的边框。它设置的值 边框宽度 , 边框样式 ， 和 边框颜色。 这 边界 至少需要一个值，最多三个值。我们可以从这些代码中学习不同值的规则 边框 — CSS：层叠样式表 | MDN (mozilla.org) ：

 /* 风格 */  
 边框：实心；  
  
 /* 宽度 |风格 */  
 边框：2px 虚线；  
  
 /* 风格 |颜色 */  
 边框：一开始#f33；  
  
 /* 宽度 |风格 |颜色 */  
 边框：中等绿色虚线；

与所有速记属性一样，任何省略的子值都将设置为其初始值。在我们的示例中， 边框：1px 实心 是相同的：

 边框宽度：1px；  
 边框样式：实心；  
 边框颜色：当前颜色；

的初始值 边框颜色 是 当前颜色 , 什么 当前颜色 方法？

当前颜色

从 — CSS：层叠样式表 | MDN (mozilla.org) ，我们可以得知 当前颜色 关键字表示元素的值[ 颜色](https://developer.mozilla.org/en-US/docs/Web/CSS/color) 财产。和CSS变量一样，我们可以想到 当前颜色 作为一个变量，其值为 颜色 ：

 按钮 {  
 颜色：#000；  
 背景：当前颜色；  
 }  
 // 等于  
 按钮 {  
 颜色：#000；  
 背景：#000；  
 }

回到我们的例子，如果我们不设置 边框颜色 ，它将指 颜色 .当我们改变 颜色 ， 这 边框颜色 将应用的最新值 颜色 .

在 CSS 中，很多属性的默认值是 当前颜色 ， 如 边框颜色 , 轮廓颜色 , 盒子阴影 等。当这些属性的值与颜色相同时，我们不需要设置它们。

这 当前颜色 对于 SVG 图标也很有用。如果我们想在 SVG 图标悬停时更改它们的颜色。我们可以用 填充：当前颜色 这意味着 SVG 图标将使用 颜色 填充路径，所以我们可以通过改变 SVG 的颜色来改变 颜色 财产。

结论

在一些边框颜色需要和字体颜色一致的场景下，我们可以在不设置边框颜色的情况下让代码更加简洁。通过使用 当前颜色 ，使 SVG 图标填充与当前文本颜色相同的颜色会变得特别有用。

感谢阅读，希望这篇文章可以帮助你写出更干净的代码。

更多内容在 ** 纯英语.io** .注册我们的 ** 免费每周通讯** .跟着我们 ** 推特** , ** 领英** , ** YouTube** ， 和 ** 不和谐** .对增长黑客感兴趣？查看 ** 电路** .

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38522/02372210