Question

我发现了css形状，我感兴趣的是有没有办法为它们制作边框（实线，点线，虚线）（shapes）？

我要做的第一件事就是制作另一个形状，然后通过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;
    }

Answer 1

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

你可以拍一个正方形，制作副本并旋转它们以使点爆裂，它看起来像一个点爆裂但是就浏览器而言，你有3个正方形，而不是点爆发，如果你放一个边界，边界将围绕每个广场。

您可以制作小矩形，旋转它们并将它们放置在“形状”的边缘以创建“边框”，所以是的，它是可行的，但是出于所有实际目的，它是疯狂的。

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

SVG现在也是since all recent browsers support it的有效选项。

Answer 2

我认为这不可能，因为你所做的事情取决于形状是由边框制成的。

您无法为已经是边框的内容添加边框。

但就像你在小提琴中所展示的那样，你可以通过背景形状来模仿另一个边框。

Answer 3

正如上面提到的一些...... CSS形状是用实心边框和那些相遇的角度制作的，所以你不能改变边框风格或者你不会产生你想要的形状

css形状的边框

3 个答案: