CSS形状的边框

Question

我发现了CSS形状，我很感兴趣，是否有办法为它们（形状）制作边框（实线、虚线、点线）？

我首先想到的是制作另一个形状，并通过z-index将其放置在背景上（http://jsfiddle.net/gYKSd/），但这只会产生实线边框效果。

HTML:

<div class="triangle"></div>
<div class="background"></div>

CSS（层叠样式表）：

     .triangle {
        position: absolute;
        top: 14px;
        left: 10px;
        height: 0px;
        width: 0px;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
        border-bottom: 100px solid red;
        z-index: 0;
}
      .background {
        position: absolute;
        top: 0;
        left: 0;
        height: 0px;
        width: 0px;
        border-right: 60px dotted transparent;
        border-left: 60px dotted transparent;
        border-bottom: 120px dotted gray;
        z-index: -1;
    }

- Vadim Kalinin

---

基本上你不能那样做，因为元素是由边框组成的...而一个边框不能再有另一个边框。这并不意味着你不能通过添加额外的元素来“伪造”，但那并不是你所问的。 - Paulie_D

CSS形状是一种hack。CSS并不是为了绘制形状而设计的。当然，如果你必须要用它来绘制基本的三角形，那就用吧；其他人也都这么做。但是不要期望它能够再进一步，因为你不能；这种hack的本质就是只能到此为止。如果你想要更多的东西，就使用浏览器的适当图形工具，比如SVG。 - Spudley

@Paulie_D 对不起，我表达不清楚。但是我指的是解决这个任务的技巧。 - Vadim Kalinin

Answer 1

您的解决方案（定位背景div）是CSS中最可行的方式，因为浏览器不会将形状识别为形状。

您可以取一个正方形，制作副本并将它们旋转以制成点爆炸，看起来像点爆炸，但就浏览器而言，您有3个正方形，而不是点爆炸，如果您放置边框，则边框将围绕每个正方形。

您可以制作小矩形，将它们旋转并将它们定位在“形状”的边缘上创建“边框”，所以是的，这是可行的，但在实际操作中，这是不明智的。

如果您需要即时绘制形状，请查看HTML5画布Intro to canvas drawing。

---

现在，由于所有的主流浏览器都支持它，SVG也成为了一种有效的选择（链接1）。

- Sylverdrag

---

谢谢。你说得对。我之前放弃了SVG，因为浏览器支持不好，但是最近的浏览器似乎已经解决了这个问题。 - Sylverdrag

@Sylverdrag 你知道Canvas和SVG哪个更占用资源吗？因为我从未使用过SVG，但我曾经使用过Canvas，它似乎并不快速。 - Vadim Kalinin

@VadimKalinin 你需要测试哪种方法适合你，但我怀疑你的性能问题是由于外部因素（连接等）而不是画布性能引起的。你可以在这里看到画布与SVG的比较：http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx#Using_Canvas_AndOr_SVG - Sylverdrag

Answer 2

我认为这是不可能的，因为你所做的依赖于形状是由边框构成的这一事实。

你不能给已经是边框的东西添加边框。

但就像你在fiddle中展示的那样，你可以通过拥有一个背景形状来模拟另一个边框。

- Overcode

Answer 3

正如一些人所说...CSS形状是由实线边框和这些边框相交的角度组成的，因此您不能更改边框样式，否则您将无法得到所需的形状。

- dougmays