CSS 边框渲染

Question

我想知道是否可以使用 CSS 指定边框绘制样式(不是border-style)(我需要它至少在 webkit 上有效)。

嗯，我有一个像 div.border 这样的元素，它有四边边框 5px silver solid。但是根据添加的类，如 div.border.red-mark，它将收到一个 border-left: 15px red solid。我需要渲染样式为矩形，而不是自适应线宽(或成一定 Angular )。

为了澄清，请查看 this example .我需要得到一些东西 like that .但是我不能修改 HTML 结构，就像我在第二个例子中所做的那样；我真的可以为此使用 only CSS。

这可能吗？

Answer 1

您可以使用 CSS 伪内容来实现假边框，如下所示:

.red-mark:before {
  content: '';
  display:block;
  width: 15px;
  position: absolute;
  top: -15px;
  left: -15px;
  bottom: -15px;
  background: red;
}

参见:http://jsfiddle.net/MnPka/1/

负数位置是因为 0 从边界内开始。您可以通过设置 box-sizing 来更改此行为，尽管对此的支持还不是很好 - http://caniuse.com/#search=box-sizing