CSS渲染边境

我想知道是否可以指定与CSS的边框拉丝风格（未border-style）（我需要工作至少在WebKit的）。CSS渲染边境

那么，我有一个像div.border这样的元素，它有四边框5px silver solid。但根据类别的增加，如div.border.red-mark，它将收到border-left: 15px red solid。我需要的渲染风格是矩形而不是自适应线宽（或成一定角度）。

澄清，看看this example。我需要得到一些东西like that。但是我不能修改HTML结构，就像我在第二个例子中那样;我真的可以使用只有CSS。

可能吗？

来源

2013-05-08 David Rodrigues

你已经证明你自己，这是可能的。没有边框样式，但你可以使用4个边框div/ – 2013-05-08 14:32:15

@SvenBieder，OP明确表示他不能修改html。 – 2013-05-08 14:34:26

@DerekHenderson没有修改html结构是没有可能的。但有些方法可以间接修改html。例如，你如何看待Josh Davenport的回答或使用javascript。或者当使用服务器端语言并且场景允许发布帖子时，那么您也可以影响HTML。这完全取决于项目的确切结构。因此OP以何种方式修改结构必须是基于整体架构的决策。 – 2013-05-08 14:40:36

你可以使用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-08 14:32:53

完美！这正是我所需要的，我也可以使用它''box-sizing'。 – 2013-05-08 14:36:43

@DavidRodrigues我认为我可能会错在我所说的将位置：0px更改为边界外部的情况下，需要对其进行测试。无论如何，能够使用它真是太棒了:)无论如何，你都会知道边界的大小，所以它无关紧要。 – 2013-05-08 14:38:41

由Josh达文波特提供的:before解决方案可能是最好的答案在这里，但只是为了完整性，我还要提到border-image。

border-image是一个相对较新的CSS功能，允许您为每个边框边角指定图像。这将使您能够根据需要设计您的边框。

你的例子对它来说是一个很平凡的例子;正如我所说的其他答案可能对你更好;但对于更复杂的情况，这是您的工具箱中的一个很棒的功能。

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

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

来源

2013-05-08 14:39:48 Spudley

回答

相关问题