如何用两种不同颜色创建边框底部？

如何创建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

如何用两种不同颜色创建边框底部？

回答

相关问题