CSS里巧用currentColor,使边框和文本同一个颜色的方法亲测

文章标签: CSS技巧
  • :
  • 01-25 20:18
  • :
  • 6次
  • :
  • 0条
  • 0赞

简介CSS里设置边框自动与文本的颜色保持一致的方法及在线实例演示。

currentColor是CSS里一个比较特殊的属性,站长把它当成一个“变量”, 这样就比较好理解了。

举个例子来说,比如我们给一个容器,如DIV,设置了“color:red”的CSS属性,那么,如果我们要让他的边框也显示成同样的颜色,那么正常情况下,我们可能会直接这样写:“border-color:red”。

那么问题来了,比如,我们CSS里有一个通用的样式,设置了字体的大小,粗细等样式,然后我们需要在使用这个CSS样式时,另外再加上不同的颜色,并且需要让它们的边框保持同样的颜色,最直接的方法,就是需要几个颜色,我们设置几个不同的CSS样式,但是如果使用currentColor这个属性的话,就能让我们的代码简单很多。

.listStyle {font-weight:bold;font-size:1.5rem;border:1px solid currentColor;}

上面这个样式,就是一个通用的样式,我们需要显示不同的颜色的时候,可以另外单独设置,如:

<div class="listStyle" style="Color:red">这是红色</div>
<div class="listStyle" style="Color:green">这是绿色</div>

站长已经亲测,可用的,下面是在线实例演示的地址:

CSS里使用currentColor让边框和文本同一个颜色的在线演示



您正在找的文章可能是: