2

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

好吧，我有一个类似的元素div.border，它有四边边框5px silver solid。但取决于类的添加，比如div.border.red-mark，它会收到一个border-left: 15px red solid. 我需要渲染样式是矩形的，并且不适应线宽（或与点成角度）。

为了澄清，看一下这个例子。我需要得到类似的东西。但我不能修改 HTML 结构，就像我在第二个例子中所做的那样；我真的只能使用CSS。

可能吗？

4

2 回答 2

6

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

于 2013-05-08T14:32:53.830 回答
2

Josh Davenport 提供的:before解决方案可能是这里最好的答案，但为了完整起见，我还应该提到border-image.

border-image是一个相对较新的 CSS 功能，允许您为每个边框边缘和角落指定图像。这将使您能够完全按照自己的意愿设计边框。

你的例子对它来说是一个非常微不足道的例子；正如我所说，另一个答案可能对你更好；但对于更复杂的情况，这是您工具箱中的一个很棒的小功能。

您可以在 MDN上阅读有关它的更多信息。

需要注意的一件事（如上面的 MDN 链接中所述）是浏览器兼容性。它适用于大多数当前浏览器，但不适用于任何当前的 IE 版本（IE10 或更早版本），并且可能在其他浏览器的旧版本中存在问题。但是，您指定您特别在寻找 Webkit 解决方案，并且它已在 webkit 浏览器中支持多年，所以应该没问题。

于 2013-05-08T14:39:48.460 回答