創建使用CSS

Question

多色吧，我想在下面的圖片創建像一個多色彩條：

是否有可能創建CSS將實現這一目標？我已經成功使用以下CSS創建顏色的漸變：

.gold{ 
    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #eab92d, #c79810); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eab92d), to(#c79810)); 
    background-image: -webkit-linear-gradient(top, #eab92d, #c79810); 
    background-image: -o-linear-gradient(top, #eab92d, #c79810); 
    background-image: linear-gradient(to bottom, #eab92d, #c79810); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 
} 

.blue { 
    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #034a96, #0663c7); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#034a96), to(#0663c7)); 
    background-image: -webkit-linear-gradient(top, #034a96, #0663c7); 
    background-image: -o-linear-gradient(top, #034a96, #0663c7); 
    background-image: linear-gradient(to bottom, #034a96, #0663c7); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 
} 

.green { 
    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #0D7626, #0a611e); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0D7626), to(#0a611e)); 
    background-image: -webkit-linear-gradient(top, #0D7626, #0a611e); 
    background-image: -o-linear-gradient(top, #0D7626, #0a611e); 
    background-image: linear-gradient(to bottom, #0D7626, #0a611e); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 
} 

我只是不知道如何使他們出現在畫面像彼此相鄰，以及如何有不同的百分比寬度（例如藍色漸變50％的酒吧，綠色漸變40％，黃金漸變10％）。

Answer 1

你需要的是:before和:after僞元素。他們將內容添加到開始和結束裏面給定的選擇器。

HTML：

<div></div> 

CSS：

div { 
    height: 2em; 

    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #eab92d, #c79810); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eab92d), to(#c79810)); 
    background-image: -webkit-linear-gradient(top, #eab92d, #c79810); 
    background-image: -o-linear-gradient(top, #eab92d, #c79810); 
    background-image: linear-gradient(to bottom, #eab92d, #c79810); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 
} 

div:before { 
    height: 2em; 
    width: 50%; 
    display: block; 
    content: ""; 
    float: left; 

    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #034a96, #0663c7); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#034a96), to(#0663c7)); 
    background-image: -webkit-linear-gradient(top, #034a96, #0663c7); 
    background-image: -o-linear-gradient(top, #034a96, #0663c7); 
    background-image: linear-gradient(to bottom, #034a96, #0663c7); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 
} 

div:after { 
    height: 2em; 
    width: 40%; 
    display: block; 
    content: ""; 
    float: right; 

    background-color: #faa732; 
    background-image: -moz-linear-gradient(top, #0D7626, #0a611e); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0D7626), to(#0a611e)); 
    background-image: -webkit-linear-gradient(top, #0D7626, #0a611e); 
    background-image: -o-linear-gradient(top, #0D7626, #0a611e); 
    background-image: linear-gradient(to bottom, #0D7626, #0a611e); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); 
} 

結果：

演示：http://jsbin.com/umaden/3/edit

PS在實際使用中，您應該將其應用於類或id，而不是元素選擇器。

Answer 2

好吧..如果你問我認爲你在問什麼，它就像這樣簡單。 HTML：

<table> 
    <tr> 
     <td class="color1"></td> 
     <td class="color2"></td> 
     <td class="color3"></td> 
    </tr> 
</table>  

CSS：

table { border-collapse: collapse; } 
td{ 
    width: 100px; 
    height: 20px; 
    padding: 0px; 
} 
.color1{ 
    background-color: red; 
} 
.color2{ 
    background-color: blue; 
} 
.color3{ 
    background-color: yellow; 
} 

或者類似的規定。

http://jsfiddle.net/waDFz/

這裏是什麼樣子。您可以編輯高度/寬度/顏色/類名稱。

Answer 3

您也可以使用網格，如：

<div class="my-grid"> 
<div class="col-1-3">(be yellow)</div> 
<div class="col-2-3">(be green)</div> 
<div class="col-3-3">(be blue)</div> 
</div> 

然後在CSS

.my-grid { 
width: 100%; 
} 
.col-1-3 { 
width: 33%; 
float: left; 
background-color: yellow; 
} 
.col-2-3 { 
width: 33%; 
float: left; 
background-color: green; 
} 
.col-3-3 { 
width: 33%; 
float: left; 
background-color: blue; 
} 
.my-grid:after { 
clear:both; 
} 

一定要做好我網：部分之後。

Answer 4

我會更喜歡table div。試試這個

<table> 
<tr width="300px"> 
<td style="background:#50c690; width:250px;height:25px;"></td><td style="background:#FE6; width:50px;height:25px;"></td> 
</tr> 
</table>