CSS 形状的边框

Border for css shapes

本文关键字：边框 CSS      更新时间：2023-09-26

我发现了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画布画布绘图简介。

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

我认为这

是不可能的，因为您正在做的事情依赖于形状是由边框构成的事实。

不能向已有边框的内容添加边框。

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

正如上面一些人所说....CSS 形状由实心边框和它们的角度组成，因此您无法更改边框样式，否则将无法生成所需的形状

相关文章：