html 渐变背景
2019-03-07 本文已影响0人
逸曦穆泽
从菜鸟教程那看了一下渐变，顺便将炫彩的背景渐变记录一下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>渐变背景图</title>
<style type="text/css">
.dv_tay{width:100%;height:100%;display:inline-block;}
.dv_jb{width:200px;height:200px;margin:10px;text-align: center;display:inline-block;}
.dv_cs{width:200px;height:60px;margin:10px;text-align: center;display:inline-block;}
#dv_a{background:linear-gradient(to top,red, blue); }
#dv_b{background:linear-gradient(to right, red , blue);}
#dv_c{background:linear-gradient(red , blue);}
#dv_d{background:linear-gradient(to left, red , blue);}
#dv_e{background:linear-gradient(to top left, red , blue);}
#dv_f{background:linear-gradient(to top right, red , blue);}
#dv_g{background:linear-gradient(to bottom left, red , blue);}
#dv_i{background:linear-gradient(to bottom right, red , blue);}
#dv_j{background:linear-gradient(90deg, red, blue);}
#dv_k{background:linear-gradient(180deg, red, blue);}
#dv_l{background:linear-gradient(red, green, blue);}
#dv_m{background:linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}
#dv_n{background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,100,100));}
#dv_o{background:repeating-linear-gradient(red, yellow 10%, green 20%)}
#dv_p{background:radial-gradient(red, green, blue);}
#dv_q{background:radial-gradient(red 5%, green 15%, blue 60%);}
#dv_r{background:radial-gradient(circle, red, yellow, green);}
#dv_s{background:repeating-radial-gradient(red, yellow 10%, green 15%)}
#dv_t{background:radial-gradient(red, green, blue);border-radius:50%;}
#dv_u{background:radial-gradient( green 20% ,green 60%, blue 20%);border-radius:30px;}
.dv_btn{width:200px;height:60px;background-color:#46a3f7;border-radius:30px;position:relative;}
.dv_padd{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;}
.dv_pad{width:180px;height:40px;background-color:#0066ff;border-radius:20px;display:inline-block;}
</style>
</head>
<body>
<p style="text-align:center;font-weight:600;">线性渐变</p>
<div class="dv_tay">
<div id="dv_a" class="dv_jb">从下到上</div>
<div id="dv_b" class="dv_jb">从左到右</div>
<div id="dv_c" class="dv_jb">从上到下（默认）</div>
<div id="dv_d" class="dv_jb">从右到左</div>
<div id="dv_e" class="dv_jb">右下到左上</div>
<div id="dv_f" class="dv_jb">左下到右上</div>
<div id="dv_g" class="dv_jb">右上到左下</div>
<div id="dv_i" class="dv_jb">左上到右下</div>
<div id="dv_j" class="dv_jb">指定角度</div>
<div id="dv_k" class="dv_jb">指定角度</div>
<div id="dv_l" class="dv_jb">多个颜色结点</div>
<div id="dv_m" class="dv_jb">彩虹颜色</div>
<div id="dv_n" class="dv_jb">使用透明度</div>
<div id="dv_o" class="dv_jb">重复</div>
<div id="dv_p" class="dv_jb">径向渐变 - 颜色结点均匀分布（默认）</div>
<div id="dv_q" class="dv_jb">径向渐变 - 颜色结点不均匀分布</div>
<div id="dv_r" class="dv_jb">设置形状：circle 表示圆形，ellipse 表示椭圆形。默认 ellipse</div>
<div id="dv_s" class="dv_jb">重复的径向渐变</div>
</div>
<div class="dv_tay">
<div id="dv_t" class="dv_jb"></div>
<div id="dv_u" class="dv_cs"></div>
</div>
<div class="dv_tay">
<div class="dv_btn">
<div class="dv_pad dv_padd"></div>
</div>
</div>
</body>
</html>
