<style>
/*线性渐变*/
div{
width: 300px;
height: 300px;
/*添加渐变：渐变不是一个单一钩，它产生的是图像，所以需要使用background*/
/*linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...);*/
/*方向：
to top:0deg
to right:90deg
to bottom:180deg --默认值
to left:270deg*/
/*background: linear-gradient(to right,red,blue)*/;
background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);
}
/*径向渐变*/
div{
width: 300px;
height: 200px;
/*添加径向渐变：产生也是图像*/
/*background: radial-gradient(red,blue);*/
/*语法：radial-gradient(形状 大小 坐标,颜色1，颜色2...)：
形状shape:
circle:产生正方形的渐变色
ellipse:适配当前的形状,如果是正方形的容器，两者效果一样.如果宽高不一样，默认效果切换到ellipse
at position:坐标，默认在正中心。
可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)
大小size:
closest-side：最近边；
farthest-side：最远边；
closest-corner：最近角；
farthest-corner：最远角。默认是最远的角farthest-corner*/
/*background: radial-gradient(circle,red,blue);*/
/*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/
/*background: radial-gradient(at left top,red,blue);*/
/*设置颜色的位置*/
background: radial-gradient(red,red 50%,blue 50%,blue);
}
/*重复渐变*/
body{
background-color: #ccc;
}
div:first-of-type{
width: 300px;
height: 300px;
/*background: radial-gradient(
#fff 0%,#fff 10%,
#000 10%,#000 20%,
#fff 20%,#fff 30%,
#000 30%,#000 40%);*/
background: repeating-radial-gradient(circle closest-side at center center,
#fff 0%,#fff 10%,
#000 10%,#000 20%);
}
div:last-of-type{
width: 200px;
height: 800px;
background: repeating-linear-gradient(45deg,
#fff 0%,#fff 10%,
#000 10%,#000 20%);
}
</style>
</head>
<body>
<div></div>
<div></div>
