我怎樣才能最好地建立一個類似的布局？我查看了 jsfiddle 和其他地方，但找不到任何類似的修改。
在正常邊框的頂部有一個“第二個盒子”，就像在檔案存盤柜中一樣。頂部第二個框的寬度應根據內部文本的寬度動態設定。
這種方法好嗎？或者我必須以某種方式制作一個 svg 檔案并在inkscape中繪制綠色圓圈框的邊框？這是我的第二個問題：如何以最佳方式為 html 分配 svg 邊框。帶邊框影像？
.frame{
border-radius: 3px 0px 3px 3px;
-moz-border-radius: 3px 0px 3px 3px;
-webkit-border-radius: 3px 0px 3px 3px;
box-shadow: 0px 0px 0px 1px rgba(192, 9, 9, 0.7);}
它應該是什么樣子
提前謝謝了
uj5u.com熱心網友回復：
看起來第二個框可能是另一個絕對定位的 div。它可以使用border-left:、border-right:等在左側、頂部和右側設定邊框。較大的框可以使用邊框border:1px solid black，第二個框可以位于頂部以重疊邊框的一部分，使其看起來像設計。使用像這樣定位的 div 元素而不是 SVG 將確保它會調整到其內容的大小。
像這樣的東西：https : //jsfiddle.net/v1zcnf0b/18/
對于您的第二個問題，該border-image屬性可用于將影像設定為邊框https://www.w3schools.com/cssref/css3_pr_border-image.asp但對于您所展示的設計，我認為最好使用上面的邊框和位置屬性實作。
uj5u.com熱心網友回復：
這可以使用重疊的兩個元素來完成。在這個例子中，.tabrow相對定位并且在 -1px 的底部有一個負的位置。它還有一個z-index高于.content.
的邊框.tab底部的寬度為 0 并具有白色背景，因此它隱藏了.content.
.tabrow {
display: flex;
justify-content: flex-end;
position: relative;
bottom: -1px;
z-index: 1;
}
.tab {
padding: .2em;
border: solid black;
border-width: 1px 1px 0 1px;
border-radius: .5em .5em 0 0;
background-color: white;
}
.content {
border: thin solid black;
padding: .2em;
z-index: 0;
}<div class="tabrow">
<div class="tab">Title</div>
</div>
<div class="content">
<p>Text</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/400992.html
下一篇：如何用css剪切部分SVG？