CSS边框渲染

Question

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

好吧,我有一个元素div.border,它有四边框5px silver solid.但是,根据课程的增加div.border.red-mark,它会收到一个border-left: 15px red solid.我需要渲染样式是矩形的,不适应线宽(或成一定角度).

为了澄清,请看一下这个例子.我需要得到的东西那样.但我无法修改HTML结构,就像我在第二个例子中所做的那样; 我真的只能使用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