CSS3线性渐变linear-gradient
渐变实际上是两种或多种颜色之间的平滑过渡。而线性渐变是多种颜色沿着一条直线(称为渐变线)过渡。渐变的实现由两部分组成：渐变线和色标。渐变线用来控制发生渐变的方向；色标包含一个颜色值和一个位置，用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变，通过确定多个色标可以制作多色渐变效果。
/*背景颜色渐变（从左侧开始，红色渐变到，蓝色）*/
background: -webkit-linear-gradient(left, red , blue);
/*90deg角度来放*/
/*background:linear-gradient(90deg,red,blue);*/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #hretj{ width: 500px; height: 200px; margin: 0 auto; border: 4px solid blue; /*背景颜色渐变（从左侧开始，红色渐变到，蓝色）*/ background: -webkit-linear-gradient(left, red , blue); /*90deg角度来放*/ /*background:linear-gradient(90deg,red,blue);*/ } #herh{ width: 300px; height: 100px; margin: 100px auto; background: -webkit-linear-gradient(top,#A4D625, #5A7900); /*圆角代码*/ border-radius: 15px; } #herh:hover{ width: 300px; height: 100px; margin: 100px auto; background: -webkit-linear-gradient(top, #5A7900,#A4D625); /*圆角代码*/ border-radius: 15px; } </style> </head> <body> <div id="hretj"> </div> <div id="herh"> </div> </body> </html> 效果图片：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知