html – 具有不透明度的currentColor

概述有没有一种方法可以改变边框的不透明度,该边框被设置为从currentColor继承它的颜色？即继承#inner2中的currentColor并将其不透明度设置为0.25. 请搜索纯css解决方案. 例如,类似于以下内容： #outer{ color: rgba(255,0,0,1);}.inner{ display: block; width: 100%; height: 1 有没有一种方法可以改变边框的不透明度,该边框被设置为从currentcolor继承它的颜色？即继承#inner2中的currentcolor并将其不透明度设置为0.25.

请搜索纯CSS解决方案.

例如,类似于以下内容：

#outer{  color: rgba(255,1);}.inner{  display: block;  wIDth: 100%;  height: 10px;  margin-bottom: 5px;  border: 2px solID currentcolor;}#inner2{  /* This is where I want to inherit current color */  /* ... but still set it to 0.25 opacity */  border-color: rgba(255,0.25);}

<div ID='outer'>  <div ID='inner1' class='inner'></div>  <div ID='inner2' class='inner'></div></div>

解决方法 您将currentcolor值与inherit混淆,后者是默认值.你没有使用currentcolor作为边框属性,因为它是边框的默认值.你只用它作背景.

#inner1和#inner2都从最接近的父级继承,其颜色设置为它(红色),边框默认使用该颜色.

无论颜色的来源(内联样式属性,外部CSS或远程祖先继承),下面的解决方案将100％的时间工作：

#outer{ color:red; }#inner1,#inner2{     padding: 2em;     margin-top: 1em;  }#inner1{ border:5px solID; } #inner2{ @R_502_4612@:relative; }#inner2::before{    content:'';  position:absolute;  top:0;  right:0;  bottom:0;  left:0;  border:5px solID;  opacity:.5;}

<div ID='outer'>  <div ID='inner1'>inner 1</div>  <div ID='inner2'>inner 2</div></div>

总结

以上是内存溢出为你收集整理的html – 具有不透明度的currentColor全部内容，希望文章能够帮你解决html – 具有不透明度的currentColor所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。