边框为CSS形状

2018-06-05 05:54:16

我发现了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;
    }

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

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

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

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

SVG现在也是一个有效的选项，因为所有最新的浏览器都支持它。

我不认为这是可能的，因为你在做什么取决于形状是从边界制成的。

你不能添加边界到已经是边界的边界。

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

正如上面所说的那样.... CSS形状是用坚实的边界和那些走到一起的角度制作的，所以你不能改变边框样式，或者你不会产生你想要的形状

链接地址: http://www.djcxy.com/p/16707.html

上一篇: Border for css shapes

下一篇: Can't back up SD card with dd, complains "Input/Output Error"