css 如何从SVG笔划中删除上边框

nqwrtyyt 于 2022-12-27 发布在其他

关注(0)|答案(1)|浏览(205)

我创建了虚线边界与一些发电机在网上，我试图删除顶部的边界，但没有运气。

div {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23D8D8D8' stroke-width='2' stroke-dasharray='10%2c 18' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    width: 100%;
  min-height:400px;
    border-top: 0;
    padding-bottom: 20px;
}

<div></div>

我知道我需要改变中风的东西-达沙拉，但不知道什么，tnx为您的帮助。

css

来源：https://stackoverflow.com/questions/74909024/how-to-remove-top-border-from-svg-stroke

1条答案

按热度按时间

ghg1uchk1#

由于边框实际上不是CSS border而是background，因此可以使用background-position将顶部"边框"移出视图，并使用background-size补偿偏移：
（我更改了笔触颜色并添加了轮廓以获得更好的可视化效果）

div {
    background: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23000' stroke-width='2' stroke-dasharray='10%2c 18' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")
    no-repeat
    0 -2px / 100% calc(100% + 2px);
    
    width: 100%;
  min-height:400px;
    border-top: 0;
    padding-bottom: 20px;
    
    outline:solid 1px #f005;
}

<div></div>

赞(0）回复(0）举报 2022-12-27

我来回答

css 如何从SVG笔划中删除上边框

1条答案

相关问题

热门标签

最新问答