径向渐变

径向渐变使用 radial-gradient 函数语法。

这个语法和线性渐变很类似， 可以指定渐变结束时的形状 以及它的大小。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

默认来说，结束形状是一个椭圆形并且和容器的大小比例保持一致。

下面代码演示径向渐变的用法：

<!DOCTYPE html> < html >      < head >          < title >径向渐变</ title >          < style type = "text/css" >              body{                  padding:20px;              }              div{color:#fff;}              div.one{                  width:150px;                  height:150px;                  border:1px solid #000;                  background: radial-gradient(red, blue, rgb(30, 144, 255));               }              div.two{                  width:150px;                  height:150px;                  border:1px solid #000;                  background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);              }                div.three{                  width:150px;                  height:150px;                  border:1px solid #000;                  background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);              }              div.four{                  width:150px;                  height:150px;                  border:1px solid #000;                  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);              }                    </ style >      </ head >      < body >          < h1 >软件开发，成就梦想</ h1 >          < h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 >          < div class = "one" ></ div >          < div class = "two" ></ div >          < div class = "three" ></ div >          < div class = "four" ></ div >      </ body > </ html >  

工作中可以使用渐变生成工具，提高工作效率。

http://www.colorzilla.com/gradient-editor/

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄