如果在具有多種邊框顏色的頁面上存在元素，則默認情況下，這些顏色相交的角落將創建斜角。這似乎是邊界角落風格的奇怪選擇。相反，我會更喜歡其中一個邊框「超過」其他邊框，以便顯示一條直線。去除邊界角落的斜角效果

爲了說明這種效果，考慮以下因素：

Top: default; bottom: desired

見例的jsfiddle例如我創建here。

前兩項顯示默認的斜面行爲。底部的兩個顯示期望的行爲，在這種情況下，邊界頂部「overpowers」或「覆蓋」border-left和border-right的角落。

爲頂殼的標記：

<div class="container"> 
    <div class="border">Item one</div> 
    <div class="border">Item two</div> 
</div>

而CSS：

.container { 
    margin: 5px; 
    width: 150px; 
    background: yellow; 
} 
.border { 
    padding: 5px; 
    border: 15px solid red; 
    border-top: 15px solid teal; 
}

的底殼的標記：

<div class="container"> 
    <div class="border-top"></div> 
    <div class="border-reg">Item one</div> 
    <div class="border-top"></div> 
    <div class="border-reg">Item two</div> 
</div>

而CSS：

.border-top { 
    border-top: 15px solid teal; 
} 
.border-reg { 
    border: 15px solid red; 
    border-top: 0; 
    padding: 5px; 
}

儘管我設計的第二種方法確實產生了我想要的效果，但似乎這對於我認爲具有默認狀態的東西來說是不必要的繁瑣。例如，如果我想要邊界左邊的來覆蓋其他邊界，我將不得不處理一些float: left和內聯元素瘋狂。

問題（最後）

有沒有取消對所有瀏覽器中觀察到的默認傘形行爲的任何簡單的方法？

儘管上面詳述的案例大多容易讓border-top或border-bottom覆蓋角落，但它不是一件簡單的任務，例如，如果我需要border-left和border-right來覆蓋邊框頂部和邊框底部。

來源

2013-07-16 Mark W

這可能會幫助：http://stackoverflow.com/questions/11052202/can-i-have-different-colored-left-and-top-borders-in-css-with-straight-join – 2013-07-16 18:34:32

這就是邊界的工作方式，我相信如果沒有額外的元素就無法改變它。

而不是空的div，你可以使用包裝div。

<div class="outer"> 
    <div class="inner">test</div> 
</div>

.inner { 
    padding : 5px; 
    border : 15px solid red; 
    border-top: 0; 
} 
.outer { 
    border-top : 15px solid teal; 
}

演示：http://jsfiddle.net/fmcvY/

還有另外一種方式與:before/:after僞元素來做到這一點，但它是一個有點混亂，但它不需要額外的標記：

<div>test</div>

div { 
    padding : 5px; 
    border : 15px solid red; 
    border-top: 0; 
    position:relative; 
    padding-top: 20px; /* border width plus desired padding */ 
} 
div:before { 
    content:' '; 
    display:block; 
    background: teal; 
    height:15px; 
    padding:0 15px; /* border width plus div padding */ 
    width:100%; 
    position:absolute; 
    top: 0; 
    left:-15px; /* border width plus div padding */ 
}

您可以用許多不同的方式編寫CSS來達到相同的效果。演示：http://jsfiddle.net/fmcvY/3/

來源

2013-07-16 18:35:49

底部方法在頂部邊框上有額外的寬度。但是，頂級方法將適用於所有邊界選項。 –

如果您不需要支援舊版瀏覽器（IE 8及以下）可以使用box-shadow：

.border { 
    padding : 35px 20px 20px 20px; 
    box-shadow: inset 0 0 0 15px red, inset 0 15px 0 15px teal; 
}

http://jsfiddle.net/fTGDs/

來源

2013-07-16 18:45:55 Duopixel

去除邊界角落的斜角效果

問題（最後）

回答

相關問題