發現一個比較好玩的東東，CSS3漸變，基本介紹和使用方式詳見http://www.runoob.com/css3/css3-gradients.html。
原本是實現顏色的過渡效果，已替代圖片的使用，但是配置合理的顏色參數，便可以實現單一元素的多顏色展示，上代碼。
Demo1 簡單的例子
html
<body>
<div class="demo"></div>
</body>
css
.demo {
height: 300px;
width: 300px;
margin: 0 auto;
border: 1px solid black;
background: linear-gradient(red, red 10%, blue 10%, blue);//注意中間red和blue後面的值
}實現效果圖
Demo2 hover效果
html
<body><div id="demoPanel" class="demo"></div></body>
css
.demo {
height: 400px;
width: 400px;
margin: 0 auto;
border: 1px solid black;
}
.li-1 { background: linear-gradient(red, red 25%, white 25%, white);}
.li-2 { background: linear-gradient(white, white 25%, red 25%, red 50%, white 50%, white);}
.li-3 { background: linear-gradient(white, white 50%, red 50%, red 75%, white 75%, white);}
.li-4 { background: linear-gradient(white, white 75%, red 75%, red);}
js
(function() {
var _demoPanel = document.getElementById('demoPanel');
_demoPanel.addEventListener('mousemove', function(event) {
_demoPanel.className = 'demo li-' + (Math.ceil(event.offsetY / 100));
});
_demoPanel.addEventListener('mouseout', function(event) {
_demoPanel.className = 'demo';
});
})() 執行效果可自行嘗試，在hover到對應顏色時改變css樣式，得到不同的效果，如下hover在第三行的效果圖2。
總結：在線性漸變樣式的屬性中，在兩個漸變終端顏色中（white，red），添加前端顏色的截斷顏色，並設置比例（white，white 25%，red），使其漸變距離爲零，從而達到取消漸變的效果。比較簡單，歡迎板磚~~~