有没有可能的方法来填充颜色之间的css双边框？
有没有可能的方法来填充颜色之间的css双边框？
提问于 2018-06-13 04:18:25
大家好，我想在我的css双边框中填充一种不同的颜色。我知道使用两个边框是可能的。
#parent{
width:100px;
height:100px;
border:1px solid #000;
display:flex;
align-items:center;
justify-content : center;
background-color:red;
}
#child{
width:80px;
height:80px;
border:1px solid #000;
background-color:#fff;
}<div id="parent">
<div id="child"></div>
</div>但在这里，我希望有一个具有单一边框属性(单个<div>或任何其他元素)的解决方案.So我使用css double Property.Is有没有可能的方法来填充这个double_border上的颜色？
#element{
width:100px;
height:100px;
border:10px double #000;
}<div id="element"></div>
请注意 :-有人标记了这可能是Another.Just的副本请在标记之前阅读这两个问题。这个问题是不同的，在这个问题上，他问的是不同color.but的两个边框的颜色，我想让两个边框保持相同的颜色，我只是想在them.hope之间填充一些颜色，你会理解这个问题的。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-13 04:35:47
你也可以使用多个长方体阴影：
#element {
width: 100px;
height: 100px;
box-shadow: 0 0 0 3px #000, 0 0 0 6px #f00, 0 0 0 9px #000;
}<div id="element"></div>
Stack Overflow用户
发布于 2018-06-13 04:29:11
您可以使用border、box-shadow和outline属性。
#element {
width: 100px;
height: 100px;
border: 3px solid black; /* inner border */
box-shadow: 0px 0px 0px 15px black; /* outer 'border' */
outline: 12px solid green; /* fill */
margin-left: 30px;
margin-top: 30px;
}<div id="element"></div>
Stack Overflow用户
发布于 2018-06-13 04:30:42
您可以使用伪元素来完成此操作：
https://jsfiddle.net/82zn96Lu/
#doubleBorder {
text-align: center;
position: relative;
z-index: 10;
padding: 100px;
background: #fff;
border: 6px solid red;
}
#doubleBorder:before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border: 6px solid blue;
}<div id="doubleBorder">
a double border
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50825245
复制相关文章
相似问题