如何用兩種不同顏色創建邊框底部？

如何創建CSS？

THXü

2016-07-01 Sigit prasetya nugroho

使用'線性gradient'邊境或背景圖片（或）放置一個小尺寸的僞元素在上面。此線程應該幫助 - http://stackoverflow.com/questions/32781360/css-border-colour-into-4-colours/32781447#32781447（雖然它有更多的顏色） – Harry

您可以使用CSS僞類即:after或:before。

h3 { 
 
    margin: 0; 
 
    padding-bottom: 7px; 
 
    position: relative; 
 
    border-bottom: 2px solid #ccc; 
 
} 
 

 
h3:before { 
 
    position: absolute; 
 
    background: brown; 
 
    height: 2px; 
 
    content: ''; 
 
    width: 50px; 
 
    bottom: -2px; 
 
    left: 0; 
 
}

<h3>Last Recent Post</h3>

而且你可以使用CSS梯度，以及：

h3 { 
 
    margin: 0; 
 
    padding-bottom: 7px; 
 
    position: relative; 
 
} 
 

 
h3:before { 
 
    position: absolute; 
 
    background: linear-gradient(to right, brown 50px, #ccc 50px); 
 
    height: 2px; 
 
    content: ''; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
}

<h3>Last Recent Post</h3>

來源

2016-07-01 05:13:31

使用的box-shadow與零模糊

語法： 箱陰影：x偏移量y偏移量模糊半徑顏色

例如：箱陰影0 0 0 1em的紅色，0 0 0 2em的橙色。

這將模擬1em紅色邊框和1em橙色邊框的邊框。

注意是橙色有2em的半徑（因爲有一半會被紅色覆蓋）

來源

2016-07-01 05:19:06

如何用兩種不同顏色創建邊框底部？

回答

相關問題