CSS边框渲染 [英] CSS Border rendering

问题描述

我想知道是否可以用CSS指定边框绘图样式（不是 border-style

I like to know if is possible to specify the border drawing style (not border-style) with CSS (I need that works at least on webkit).

好吧，我有一个元素 div.border 并且它具有四边形 5px silver solid 。但是，根据类添加，如 div.border.red-mark ，它会收到一个 border-left：15px红色实体。我需要的渲染样式是矩形，而不是适应线宽（或角度到一个点）。

Well, I have an element like div.border and it have four-side border 5px silver solid. But depending of class addition, like div.border.red-mark, it will receive a border-left: 15px red solid. I need that the rendering style be rectangular and not adaptative to line width (or angled to a point).

要澄清，请查看 此示例 。我需要 喜欢 。但是我无法修改HTML结构，就像我在第二个例子中做的那样;我真的可以使用只有CSS 。

To clarify, take a look at this example. And I need get something like that. But I can't modify the HTML structure, like I did on second example; I really can use only CSS for that.

是否可以？

推荐答案

您可以使用CSS伪内容来实现假边界，例如：

You could use CSS pseudo-content to achieve a fake border, like this:

.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

The minus positions are because 0 starts within the border. You may be able to change this behaviour by setting box-sizing though support for that isn't that great yet - http://caniuse.com/#search=box-sizing

这篇关于CSS边框渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！