css - CSS：用边距调整框宽度？

Question

我有一个宽度可变的盒子，因为它取决于容器的大小。该框没有内容，因此我使用边距来相对定义其宽度，但它不起作用。这是我的代码：

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  content:"";
  border-top: 2px solid red;
  margin: -20px 0 7px -7px;
  position:absolute;
  width:auto;
}

这是我的小提琴http://jsfiddle.net/x7rrj/3/

请注意红色边框是如何在不尊重右边距的情况下超出框的，如果我将宽度设置为自动，那么红色边框根本不会显示。是否可以仅使用 CSS 解决此问题？

谢谢你。

Answer 1

好的，感谢爱德华给我的一个想法，我找到了答案。通过用顶部、左侧和右侧替换边距解决了这个问题。

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  border-top: 2px solid white;
  content: "";
  width: auto;
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
}

Answer 2

我看着小提琴，发现顶部的红色边框没有显示。

它有一条填充线：0 100%; 删除该行似乎可以解决您的问题。

这是你想要的最终结果吗？

http://jsfiddle.net/z5952/

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  border-top: 2px solid white;
  content: "";
  margin: -9px 0 7px -7px;
  position: absolute;
  width: auto;
}

Answer 3

这是你要找的东西吗？

http://jsfiddle.net/x7rrj/16/

由于您position:absolute用于定位线条，因此您也可以使用top,right来left控制位置和宽度：

.box:before {
  border-top: 2px solid red;
  content: "";

  padding: 0 100%;
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
}