CSS-需要“三重”边框 [英] Css - Need 'triple' border
本文介绍了CSS-需要“三重”边框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这个CSS:
border: 2px solid #00ff60;
outline: 1px solid #000;
outline-offset: 0px;
哪个生成此内容:
如何调整它的底部也有黑色内边框?
How can I adjust it to also have an inner black border like at the bottom?
编辑:很抱歉忘记添加,我想将此样式应用于图像。
sorry forgot to add, I want to apply this style to an image.
推荐答案
请考虑使用 box-shadow
。您也可以使用多个 box-shadow
来做到这一点:
Consider using box-shadow
. You can also do it with multiple box-shadow
:
.box {
border: 5px solid #00ff60;
outline: 5px solid #000;
outline-offset: 0px;
height: 100px;
width: 100px;
box-shadow:0px 0px 0px 5px #000 inset;
display:inline-block;
}
.box-alt {
border: 5px solid #000;
outline: 5px solid #00ff60;
outline-offset: 0px;
height: 100px;
width: 100px;
box-shadow:0px 0px 0px 10px #000;
margin:10px 20px;
display:inline-block;
}
.box-alt-2 {
height: 100px;
width: 100px;
box-shadow:0px 0px 0px 5px #000,
0px 0px 0px 10px #00ff60,
0px 0px 0px 15px #000;
margin:10px 20px;
display:inline-block;
}
<div class="box">
</div>
<div class="box-alt">
</div>
<div class="box-alt-2">
</div>
您还可以使用多个背景和线性渐变来实现相同效果:
You can also achieve the same using multiple background and linear-gradient:
.box {
height: 100px;
width: 100px;
background:
linear-gradient(#fff,#fff) center/calc(100% - 20px) calc(100% - 20px),
linear-gradient(red,red) center/calc(100% - 15px) calc(100% - 15px),
linear-gradient(#000,#000) center/calc(100% - 10px) calc(100% - 10px),
linear-gradient(green,green) center/calc(100% - 5px) calc(100% - 5px),
linear-gradient(#000,#000) center/100% 100%;
background-repeat:no-repeat;
}
<div class="box">
</div>
这篇关于CSS-需要“三重”边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文