如何從 svg 筆划中刪除頂部邊框

Question

我在網上用一些生成器創建了虛線邊框，我試圖刪除頂部邊框但沒有運氣。

 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>

我知道我需要更改 stroke-dasharray 中的某些內容，但不知道是什么，感謝您的幫助。

Answer 1

由於您的邊框實際上不是 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>