Issue
Is there a method in which I can change the opacity of a border which is being set to inherit it's color from currentColor
? i.e. inherit currentColor
in #inner2
and set it's opacity to 0.25
.
Searching for a pure css
solution please.
For example, something which resembles the following:
#outer{
color: rgba(255,0,0,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,0,0.25);
}
<div id='outer'>
<div id='inner1' class='inner'></div>
<div id='inner2' class='inner'></div>
</div>
Solution
You are confusing currentColor
value with inherit
which is the default. you don't use currentColor
for border properties because that it the default value for the border. you only use it for background
.
#inner1
and #inner2
both inherit from the closest parent which has a color set to it (red) and the border is using that color by default.
Below solution will work 100% of the time, regardless of the color's source
(inline style
attribute, external CSS or distant ancestor inheritance):
#outer{ color:red; }
#inner1, #inner2{
padding: 2em;
margin-top: 1em;
}
#inner1{ border:5px solid; }
#inner2{ position: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>
Also, see my other answer here which uses cutting-edge syntax.
Answered By - vsync
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.