Css 如何添加不同形状的边框？

只有使用css才能看到这种东西吗

html看起来像：

<div class="blocks-wrapper">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

---

但这使得肖多不是一个边界，我需要类似边界的东西。我可以在javascript的每个块中添加不同的类，或者使用svg文件，但如果没有它也可以做到，那么工作量将大大减少，也不会很重。谢谢

试试这个，希望它能有所帮助：

//数据-----------
变量点=[
{“x”：0，“y”：40}，
{“x”：30，“y”：40}，
{“x”：30，“y”：20}，
{“x”：60，“y”：20}，
{“x”：60，“y”：-10}，
{“x”：30，“y”：-10}，
{“x”：30，“y”：0}，
{“x”：0，“y”：0}，
{“x”：0，“y”：10}，
{“x”：-30，“y”：10}，
{“x”：-30，“y”：20}，
{“x”：0，“y”：20}，
];
//-----------
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.translate（c.width/2，c.height/2）；
比例尺（1，-1）；
//画网格----------
ctx.lineWidth=1；
ctx.strokeStyle=“rgba（0,0,0,0.2）”；
ctx.beginPath（）；
for（设i=0；i<200；i++）{
ctx.moveTo（i*10，-200）；
ctx.lineTo（i*10200）；
ctx.moveTo（-i*10，-200）；
ctx.lineTo（-i*10200）；
ctx.moveTo（200，i*10）；
ctx.lineTo（-200，i*10）；
ctx.moveTo（200，-i*10）；
ctx.lineTo（-200，-i*10）；
}
ctx.stroke（）；
ctx.closePath（）；
//画形状----------
ctx.beginPath（）；
移动到（（点[0].x），（点[0].y））；
for（设i=1；i

.draw{
边框：1px纯灰；
}

---

这种设计当然是可能的，尽管它可能非常脆弱。这就是你需要的形状，还是用户可以做些什么来改变它？是的，用户必须选择块和拖放，但这是另一项工作，不是吗？这不是一个网站，只是让你写代码。我们在这里帮助您处理您编写的代码，并且您有一个特定的问题-但不是为您完成全部工作。也就是说，您可能希望查看

框阴影

属性-使用

插入

可以使其在框内创建阴影，因此也许这可以帮助您实现这些蓝色，盒子里粘糊糊的部分（假设这些是你想要的东西的一部分，而不是一些图形故障。）@misorude:/我想我写了一个很好的问题：（我写下了我的解决方案，我发现了什么，我想知道是否有可能做到这一点，如果是的话，告诉我怎么做。我不要求做我的全部工作，为什么我应得-1我不知道：/advanced谢谢你！现在我知道了为什么我得到了-2:/。我提到如果我对块使用不同的类，我可以做到，但我一直在努力做到如果没有它，想象一下有大数据——我应该从中画出这种蓝色的块，如果我循环它并添加适当的类，我可以做到这一点，但我想问是否有可能给“块包装器”和“块”提供某种样式类并获得结果。谢谢你的时间！好的！！此时我认为你应该使用画布，它更灵活，你可以像你想要的那样绘制形状是的，每个块都有自己的（x，y）。谢谢你的建议！@vano我用画布编辑了答案，希望这会有用help@vano关于你的问题，我认为画布更灵活、更轻，因为它在轴上工作，默认情况下，它提供不同的事件，如拖动，所以你可以编辑、删除、添加…你可以自由地管理你想要的形状d很容易，希望我清楚地回答了这个问题，欢迎你！！

.blocks-wrapper {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));  
}