CSS 边框渲染答案

【问题标题】：CSS Border renderingCSS 边框渲染
【发布时间】：2013-05-02 20:05:31
【问题描述】：

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

嗯，我有一个像div.border 这样的元素，它有四边边框5px silver solid。但是根据添加的类，例如div.border.red-mark，它将收到border-left: 15px red solid。我需要渲染样式是 rectangular 而不是 自适应 到线宽（或与点成角度）。

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

有可能吗？

【问题讨论】：

您已经证明自己是可能的。不使用边框样式，但您可以使用 4 个边框 div 解决方法
@SvenBieder，OP 明确表示他不能修改 html。
@DerekHenderson 不修改 html 结构是不可能的。但是有一些方法可以间接修改 html。例如，您如何在 Josh Davenport 的回答中或使用 javascript 中看到它。或者，当使用服务器端语言并且场景允许回帖时，您也可以影响那里的 html。这一切都取决于项目的确切结构。所以OP以何种方式修改结构一定要根据整体架构来决定。
@SvenBieder，Josh Davenport 的答案是一个纯 CSS 的答案，正是 OP 正在寻找的，这就是为什么我是第一个给它投票的人。但是用:before 注入内容与以OP 在他的第二把小提琴中所做的方式修改html 并不完全相同。所以答案是肯定的，这是可能的，达文波特先生巧妙地展示了如何做到的。
@SvenBieder - Josh 的回答没有修改 HTML 结构。它添加了一个伪元素，但它明确不是 HTML 结构或 DOM 的一部分。无论如何，甚至不用:before也可以做到；使用border-image查看我的答案。

标签： css border

【解决方案1】：

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

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

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

您可以阅读更多关于它的信息here at the MDN。

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

【讨论】：

【解决方案2】：

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

【讨论】：

完美！这正是我需要的，我也可以将它与box-sizing 一起使用。
@DavidRodrigues 我认为我在那里所说的关于将position: 0px 更改为边界之外的内容可能是错误的，需要对其进行测试。无论如何都能使用它真是太好了:)无论如何你都会知道边框的大小，所以这并不重要。