我們如何使用線性漸變創建設計背景？

我有以下設計，我想在單div標籤上使用單背景css屬性來管理它。我們如何使用線性漸變創建設計背景？

enter image description here

我添加以下代碼，使背景，因爲它的形象，但我不能管理它的頁腳。 HTML

<div class="main-container></div>

CSS

.main-container{ 
linear-gradient(to right, #86aec1 0%, #86aec1 3.6%, #afafaf 3.6%, #afafaf 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
height: 100%; 
margin: 0 auto; 
width: 73.9%; 
}

使用上面的代碼顯示只剩下藍色的部分和右側灰色部分，但我無法得到任何其他的選擇，我可以在一個DIV創建頁腳部分。

來源

2014-07-26 vin

你在尋找類似[這裏]（http://jsfiddle.net/Tm2rF/1/ ）？不確定，因此不添加爲anwer。 – Harry

是的，你是偉大的，但我嘗試相同，但我想要完全相同的設計。您可以在底部看到藍色背景之間有灰色空間。那件事很難設計。 :( – vin

的確，我們必須使用box-shaow（插入）和線性漸變的組合，並且灰色區域在小提琴中。 – Harry

您可以使用box-shadow和linear-gradient的混合來實現此目的。請參閱內嵌評論以瞭解更多詳情。

.main-container { 
 
    background: -webkit-linear-gradient(top, #afafaf 89%, #86aec1 89%, #afafaf 91%); /* this produces the thin line above the bottom */ 
 
    background: -moz-linear-gradient(top, #afafaf 89%, #86aec1 89%, #afafaf 91%); 
 
    background: linear-gradient(top, #afafaf 89%, #86aec1 89%, #afafaf 91%); 
 
    /* Just play around with the percentages and increase them to get a thicker line */ 
 
    height: 300px; 
 
    margin: 0 auto; 
 
    width: 73.9%; 
 
    box-shadow: inset 25px -25px #86aec1; /* this produces the thick left and bottom border */ 
 
    border: 1px solid black; 
 
}

<div class="main-container">&nbsp;</div>

來源

2014-07-26 06:47:57 Harry

你太棒了。感謝您的傑出答案。 – vin

您可以使用多個背景。在下面的例子中，兩個線性漸變和純色背景時：

.main-container { 
 
    margin: 0 auto; 
 
    width: 50%; 
 
    height: 300px; 
 
    background: 
 
    linear-gradient(to right, 
 
     rgba(133, 173, 192, 1) 0, rgba(133, 173, 192, 1) 20px, 
 
     rgba(133, 173, 192, 0) 20px 
 
    ), 
 
    linear-gradient(to top, 
 
     rgba(133, 173, 192, 1) 0, rgba(133, 173, 192, 1) 20px, 
 
     rgba(133, 173, 192, 0) 20px, rgba(133, 173, 192, 0) 25px, 
 
     rgba(133, 173, 192, 1) 25px, rgba(133, 173, 192, 1) 30px, 
 
     rgba(133, 173, 192, 0) 30px 
 
    ), 
 
    #AFAFAF; 
 
}

<div class="main-container"></div>

來源

2015-02-04 09:10:09

我們如何使用線性漸變創建設計背景？

回答

相關問題