发现一个比较好玩的东东，CSS3渐变，基本介绍和使用方式详见http://www.runoob.com/css3/css3-gradients.html。
原本是实现颜色的过渡效果，已替代图片的使用，但是配置合理的颜色参数，便可以实现单一元素的多颜色展示，上代码。
Demo1 简单的例子
html
<body>
class="demo">
body>
css
.demo {
height: 300px;
width: 300px;
margin: 0 auto;
border: 1px solid black;
background: linear-gradient(red, red 10%, blue 10%, blue);
}
实现效果图
Demo2 hover效果
html
"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），使其渐变距离为零，从而达到取消渐变的效果。比较简单，欢迎板砖~~~
京公网安备 11010802041100号