1. 渐变介绍
渐变是作用在当前元素的背景色上面的
2. 线性渐变
linear-gradient 线性渐变指沿着某条直线朝一个方向产生渐变效果
2.1 使用
需要配置background: linear-gradient(渐变方向, 起始颜色，中止颜色)
只能是配置background使用，在background-color上无效
渐变方向：
① to left, to right, to top, to bottom
② 也可以是角度, 0deg, 90deg, 180deg, 270deg, 相当于始终的起点到终点
示例代码1
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .div1 { width: 200px; height: 100px; /* linear-gradient是用在background属性上的，不能用在background-color上 linear-gradient有三个参数 分别是角度、起始颜色，结束颜色 角度值,可以是方向也可以是角度 to left 相当于 270deg, to right 相当于 90deg, to top 相当于 0deg, to bottom相当于 180deg,是默认值，不写就是该值 */ background: linear-gradient( 90deg,green, pink ); } </style> </head> <body> <!--创建一个div--> <div class="div1"></div> </body> </html>运行结果
颜色渐变，可以设置分段渐变，以百分比的形式设置
示例代码2
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .div1 { width: 200px; height: 100px; background: linear-gradient( 135deg, black 0%, red 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75% ); } </style> </head> <body> <!--创建一个div--> <div class="div1"></div> </body> </html>运行结果
3. 径向渐变
径向渐变是指从一个中心点开始沿着四周产生渐变效果
通过设置background:radial-gradient(中心点及渐变半径，起始颜色，终止颜色);
示例代码
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .div1 { width: 200px; height: 200px; /*设置圆角边框*/ border-radius: 50%; /*50%表示，边框圆角为宽度和高度的一半*/ background: radial-gradient( 100px at center, /*at center 是默认值，默认在中心位置，不写就是默认值*/ white, black ); } </style> </head> <body> <!--创建一个div--> <div class="div1"></div> </body> </html>运行效果
示例代码2 可以实现同上图一样的效果
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .div1 { width: 200px; height: 200px; /*设置圆角边框*/ border-radius: 50%; /*50%表示，边框圆角为宽度和高度的一半*/ background: radial-gradient( 100px 100px at center, /*两个参数表示，横向100px,纵向100px*/ white, black ); } </style> </head> <body> <!--创建一个div--> <div class="div1"></div> </body> </html>示例代码3 效果同上
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .div1 { width: 200px; height: 200px; /*设置圆角边框*/ border-radius: 50%; /*50%表示，边框圆角为宽度和高度的一半*/ background: radial-gradient( 50% 50% at center, /*两个参数表示，横向100px,纵向100px*/ white, black ); } </style> </head> <body> <!--创建一个div--> <div class="div1"></div> </body> </html>at center 可以改成 left 、right、top、bottom
