如何爲同一邊框使用不同的顏色？

Colored Border 如何爲同一邊框使用不同的顏色？

^這就是輸出結果。

它是關於div的邊界底部屬性，這需要在視口的整個寬度。

我已搜查SO，我已經試過的答案，但問題是，他們中的一些地址經過邊界在所有方向上，和其他人有不同顏色的邊框，而不是在同一條線上。

怎麼可以這樣用純CSS來實現，或任何其preproessors的？

而且，我可以將圖像，並使其反應使用MaterializeCSS，但能夠擊敗目的。所以，像使用它作爲圖像的答案是無用的。

心靈的距離。

來源

2015-06-30 Abhishek Soni

謝謝，-1。無法解決。讓我們倒下。 –

對於一個HTML元素，我懷疑這是完全可能的，但是我最近看到很多令人印象深刻的事情，最近只有聰明的CSS才能完成，我不能100％肯定。編輯：來自Akshay的回答只是證明了我的觀點，儘管它沒有間隔。 –

準確地說，這就是爲什麼我發佈這個問題提到'一個div'。 –

您可以使用多個框的陰影來實現這一

我創建了一個:after僞元素和使用box-shadow s的不同顏色來複制它。您可以通過添加100到以前box-shadow

div{ 
 
    width:500px; 
 
    height:100px; 
 
    position:relative; 
 
    background:lightgrey; 
 
} 
 

 
div:after{ 
 
    position:absolute; 
 
    content:""; 
 
    width:100px; 
 
    height:3px; 
 
    background:dodgerblue; 
 
    bottom:0; 
 
    box-shadow:105px 0 0 0 red,210px 0 0 0 yellow,315px 0 0 0 green; 
 
}

<div></div>

來源

2015-06-30 09:47:45 Akshay

或者，如果你想設置的色彩之間的白色空間添加更多的色彩，只是做一點計算，並添加參數的box-shadow

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div{ 
     width:520px; 
     height:100px; 
     position:relative; 
     background:lightgrey; 
    } 

    div:after{ 
     position:absolute; 
     content:""; 
     width:100px; 
     height:3px; 
     background:dodgerblue; 
     bottom:0; 
     box-shadow:5px 0 0 0 white,105px 0 0 0 red,110px 0 0 0 white,210px 0 0 0 yellow,215px 0 0 0 white,315px 0 0 0 green,320px 0 0 0 white,420px 0 0 0 orange; 
    } 
</style> 
</head> 
<body> 

    <div></div><div></div><div></div><div></div> 

</body> 
</html>

對不起，起初我只是想從阿克沙伊發表評論文章，但它並沒有給我空間去做。

來源

2015-06-30 10:12:37

如果你真的想用border屬性要做到這一點，那麼你應該遵循以下步驟：

創建圖像看起來像這樣：

Image name:border.jpg

使用以下CSS和HTML

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div{ 
margin: 0px; 
padding:0px; 
width:100%; 
height:100px; 
background-color: #eeeeee; 
border-bottom: 4px solid; 
-webkit-border-image: url(border.jpg) 0 0 10 0 stretch; /* Safari 3.1-5 */ 
-o-border-image: url(border.jpg)0 0 10 0 stretch; /* Opera 11-12.1 */ 
border-image: url(border.jpg)0 0 10 0 stretch; 
} 

</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

來源

2015-06-30 10:44:48

如何爲同一邊框使用不同的顏色？

回答

相關問題