代码之家 › 专栏 › 技术社区 › ADH - THE TECHIE GUY

在css双边框之间是否有可能填充颜色?[复制品]

border css html

ADH - THE TECHIE GUY · 技术社区 · 6 年前

这个问题已经有了答案:

Css - Need 'triple' border 1答

大家好,我想换一种颜色 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>

或者其他元素)。


   double

属性。有没有可能在这个双色边框上填充颜色?

#element{
  width:100px;
  height:100px;
  border:10px double #000;
}

<div id="element"></div>

请注意 有人说这可能是另一个。请在你做标记之前把这两个问题都读一遍。这个问题是不同的,在那个问题上他要求的颜色两个不同颜色的边框。但这里我想保留两个相同颜色的边框,我只想在希望你能理解这个问题。

3 回复 | 直到 6 年前

Puschi 6 年前

也可以使用多个框阴影:

#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>

j08691 6 年前

你可以使用 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>

j08691 6 年前

可以使用伪元素来完成此操作:

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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前