CSS3中渐变属性设置
CSS3 提供了两种类型的渐变：线性渐变（linear-gradient）和径向渐变（radial-gradient）。这些渐变可以用来创建丰富的视觉效果，如背景、边框等。以下是这两种渐变的详细设置方法：
一、 线性渐变
（linear-gradient）
线性渐变是沿着直线方向的颜色过渡。其基本语法如下：
background-image: linear-gradient(方向, 颜色1 [偏移1], 颜色2 [偏移2], ...);
方向：可以是角度（如 45deg ）或者预定义的关键词（如 to bottom，to left bottom ）。
- 颜色1：渐变的起始颜色。
- 偏移1：起始颜色的结束位置（可选）。
- 颜色2：渐变的结束颜色。
- 偏移2：结束颜色的开始位置（可选）。
示例1：
div:first-child{
background: linear-gradient(#ff00ff,#00ffff);
}
示例2：
/* 垂直和水平渐变 */
div:nth-child(2){
/* background: linear-gradient(to right,#ff00ff,#00ffff,pink);
background: linear-gradient(to left,#ff00ff,#00ffff,pink);
background: linear-gradient(to top,#ff00ff,#00ffff,pink);
background: linear-gradient(to bottom,#ff00ff,#00ffff,pink);
background: linear-gradient(to right top,#ff00ff,#00ffff,pink);
background: linear-gradient(to right bottom,#ff00ff,#00ffff,pink);
background: linear-gradient(to left top,#ff00ff,#00ffff,pink); */
background: linear-gradient(to left bottom,#ff00ff,#00ffff,pink);
}
示例3：
/* 角度渐变 */
div:nth-child(3){
/* 可以设置旋转度数 如 44deg*/
background: linear-gradient(44deg, #ff00ff,#00ffff,pink,yellow);
}
示例4：
/* 带偏移的渐变 */
div:nth-child(4){
background: linear-gradient(#ff00ff 0% ,#ff00ff 15%,#00ffff 15%,#00ffff 20%,pink 20%,pink 37%,yellow 37%,yellow 100%);
}
div:nth-child(11){
background: linear-gradient(#ff00ff ,#00ffff 15%,pink 20%,yellow 37%);
}
二、径向渐变
（ radial-gradient ）
径向渐变是从一个点向外扩散的颜色过渡。其基本语法如下：
background-image: radial-gradient(形状 大小 [位置], 颜色1 [偏移1], 颜色2 [偏移2], ...);
- 形状：可以是 circle 或 ellipse 。
- 大小：可以是 closest-side 、 closest-corner 、 farthest-side 、 farthest-corner 或具体的尺寸。（例子中未展示）
- 位置：可以是 at 后跟位置关键词（如 center ），或者具体的坐标。
- 颜色1：渐变的起始颜色。
- 偏移1：起始颜色的结束位置（可选）。
- 颜色2：渐变的结束颜色。
- 偏移2：结束颜色的开始位置（可选）。
示例1：
/* 圆形径向渐变 */
div:nth-child(8){
background-image: radial-gradient(circle, red, yellow, green);
/* background: repeating-radial-gradient(yellow,#00ffff , #ff00ff,pink); */
}
三、重复渐变：
（ repeating-linear-gradient 和 repeating-radial-gradient ）
CSS3 还支持重复渐变，可以创建重复的图案效果。
重复线性渐变：
background-image: repeating-linear-gradient(方向, 颜色1 [偏移1], 颜色2 [偏移2], ...);
重复径向渐变：
background-image: repeating-radial-gradient(形状 大小 [位置], 颜色1 [偏移1], 颜色2 [偏移2], ...);
示例1：
/* 重复线性渐变 */
div:nth-child(7){
/* 若没有占据100% ，可以设置重复 */
background: repeating-linear-gradient(#ff00ff 0% ,#ff00ff 15%,#00ffff 15%,#00ffff 20%,pink 20%,pink 37%);
}
div:nth-child(8){
/* 若没有占据100% ，可以设置重复 */
background: repeating-linear-gradient(#ff00ff ,#00ffff 15%,pink 20%,yellow 37%);
}
示例2：
/* 重复径向渐变 */
div:nth-child(9){
background: repeating-radial-gradient(#ff00ff 0% ,#ff00ff 15%,#00ffff 15%,#00ffff 20%,pink 20%,pink 37%);
}
div:nth-child(10){
background: repeating-radial-gradient(#ff00ff ,#00ffff 15%,pink 30%,yellow 44%);
}
这些渐变可以用于各种元素的背景、边框等，为网页设计提供丰富的视觉效果。
