How to create a translucent border? And how to create mutiple borders effect for a "div"? It's not comlex but contains some tips. Let's do it together.
1. Translucent border
It's easy to create a translucent background, you can use "opacity". However, as for border, we have to use "rgba". But is that all? No! Absolutely not! If you don't believe, just look at an example:
.wrap{
width:100%;
height:200px;
top:0;
left:0;
background: #8234aa;
text-align: center;
}
.inner {
position: absolute;
box-sizing:border-box;
width:40%;
height:100px;
margin-left:30%;
margin-top: 50px;
background: white;
border:10px solid rgba(255,255,255,0.5);
}
And it's effect:
So what's happenning? We have already set the "rgba" attribute, but where is my translucent border? Actually, we forget one thing, because the border belongs to content, it's one part of content, it is really set translucent, but because the background is white, we cannot see the transluent effect. How to do? "background-clip"!
.inner2 {
background-clip: padding-box;
}
Ok, in this example we get a perfect effect.
2. Multiple borders
If you want to set more than one border for a "div". What would you do? There are two methods for you!
(1) Box-shadow
This attribute allows you to create infinite borders, what you need to do is to set the fourth parameter. It means shadow dilation. Let's see an example!
.inner3 {
box-shadow: 0 0 0 10px #655;
}
The effect, the "div" has two borders already. If you want to create a inner border, just add "inset" key word.
(2) Outline
If you think box-shadow is perfect, I will ask you to create two dashed borders for a "div", what will you do? Of course in this case, the "box-shadow" can do nothing. We should use "outline" to help us. Let's see an example:
.inner4 {
outline: 5px dashed deeppink;
}
And it's effect as below. The "outline" can also be set negetive number in order to create inner dashed border.
3. Tips
(1) The "outline" can only use once. It means if you want to create more than two borders, you must use "box-shadow" or use another methods.
(2) The "outline" cannot create radius border. It means the outline border will also be the 90 degree. Maybe this bug will be revised in the future. But now, if you want to create radius border, please use "box-shadow" or another methods.
The final example, four radius borders:
.inner {
border-radius: 5px;
background-clip: padding-box;
box-shadow: 0 0 0 10px #655,
0 0 0 15px rgba(255,255,255,0.5),
0 2px 5px 15px rgba(0,0,0,0.6);
}
Effect:
(That's all)