css - Css - 需要“三重”边框
问题描述
我有这个CSS:
border: 2px solid #00ff60;
outline: 1px solid #000;
outline-offset: 0px;
产生这个:
我怎样才能调整它以在底部也有一个内部黑色边框?
编辑:抱歉忘记添加,我想将此样式应用于图像。
解决方案
考虑使用box-shadow
. 您也可以使用多个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>
您也可以使用多个背景和线性渐变来实现相同的效果:
.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>
推荐阅读
- java - 如何管理实时的微服务
- portfolio - 使用IBroker 包持续订阅投资组合数据?
- tableau-api - Tableau Server v2018.2 拒绝使用端口 80,尽管它已打开
- opencl - 如何在 AMD GCN 卡上为每个计算单元运行两个工作组
- c - 当我按下键盘上的键时如何防止重复字符
- mysql - 为什么我的 AWS MySQL 快照数据会比我 12 小时前进行的手动备份更早?
- excel-formula - 如何从单元格中复制特定的单词或数字?
- python-3.x - unable to do aws configure in cygwin environment no such file or directory error
- algorithm - 基于两列创建决策树
- ios - Swift 4 中的 UICollectionViewController 未调用 cellForItemAt 函数