http://www.webkaka.com/tutorial/html/2022/0329246/
学习CSS渐变背景时，看到-webkit-gradient()里有个属性值是color-stop()，一开始不是很理解，于是查阅了一些资料，了解到了有关color-stop()的一些知识。如果你也正在学习这方面的知识，那么本文或许合适你，本文将通过一个简单的实例，来解释color-stop()的含义及其用法。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: 50px 50px;
width: 350px;
height: 200px;
}
.test{
background: -webkit-gradient(linear, 0 0, 0 100%, from(blue), color-stop(8%, white), color-stop(20%,red),to(yellow));
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
该实例中，用的是background:-webkit-gradient()这个背景渐变属性，这是webkit内核的safari、Chrome的Linear Gradients (线性渐变) ，其语法结构是：
background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );-webkit-gradient是background的一个属性值。
-webkit-gradient第一组参数type（类型）为 linear（线性）。
-webkit-gradient第二组参数是x1 y1, x2 y2当成颜色渐变体的两个点的坐标。x1，x2，y1，y2的取值范围为0%-100%，当x1，x2，y1，y2取值为极值的时候，x1和x2可以取值left（或0%）或right（或100%），y1和y2可以取值top（或0%）或bottom（或100%）。
垂直渐变和水平渐变渐变时，x1和x2可以最简单的取值是left（或0%）或right（或100%），y1和y2可以最简单的取值是top（或0%）或bottom（或100%）。
from(开始颜色值)，to(结束颜色值)是两个渐变颜色值。
[color-stop(偏移量<小数>,停靠颜色值),…]：可以使用多个color-stop，如果渐变只有2个颜色，那么可以不使用该参数；偏移量必须为大于0且小于1的小数（可用百分比表示），如果偏移量>=1,那么该color-stop相当于无效。
