邊框頂部長度的一半

-3

我附上了一張圖片。我想創建類似的邊框。但我無法創建頂部邊框一半

這裏是我的CSS

border-left:1px solid; 
border-top:1px solid; 
border-bottom:1px solid; 
border-right:1px solid;

如何實際上使頂部邊框的限制？

來源

2016-10-26 danel yad

你不能。您需要在背景圖標上方放置背景以達到效果，但是邊框總能呈現100％ –

我可以這樣做嗎？ –

不可能「剪輯」邊框。將邊框放在整個框的周圍 - 然後使用定位將徽標（及其超大剪輯）放置在邊框的頂部。只要徽標的「空白」與頁面背景顏色相同，就會產生這種錯覺。 – Korgrue

您可以舉報此一fieldset和legend：

fieldset { 
 
    height: 100px; 
 
    width: 80%; 
 
    margin: 1em auto; 
 
} 
 
legend { 
 
    padding: 1em; 
 
}

<fieldset> 
 
    <legend>Icon here</legend> 
 
</fieldset>

注意：這是不語義，因爲這是不打算使用fieldset或legend的。

MDN Reference

的HTML元素的web表單中用來將若干控制以及標籤（）。

來源

2016-10-26 15:26:17

誰downvoted這一點，爲什麼呢？ – j08691

我不知道，但我認爲這是因爲根據瀏覽器的不同，fieldset將呈現不同的結果。如果OP使用bootstrap，那麼它很差，因爲fieldset完全由設計改變。 –

哇謝謝。但是我使用引導和崩斷:( –

使用字段集和傳說：

body { 
 
    background-color: #4a494e; 
 
} 
 

 
.box { 
 
    border: 5px #b79a60 solid; 
 
    color: #b79a60; 
 
} 
 

 
.box-label { 
 
    color: #b79a60; 
 
    padding: 5px 10px; 
 
}

<fieldset class="box"> 
 
    <legend class="box-label">Insert Clock Image Here</legend> 
 
    <h1>Hours</h1> 
 
    <p>Show gallery opens daily</p> 
 
    <p>11.00am - 6.00pm</p> 
 
</fieldset>

來源

2016-10-26 15:31:11

@Paulie_D打我衝 –

我給予好評對你來說太:) –

哇謝謝你。但我使用Bootstrap和它的破解:( –

邊框頂部長度的一半

回答

相關問題