background: radial-gradient(center, ellipse cover, #color1 0%, #color2 100%);
其中,center表示渐变中心,默认为50% 50%
(即居中),可以设为其他值;ellipse cover表示渐变形状,默认为圆形,也可以设为椭圆形或正方形等形状以达到不同的效果;color1和color2表示渐变区间的起始点和重点颜色,可以定义多个,按顺序渐变。
除了使用具体的颜色值进行渐变,还可以使用关键字(如transparent
表示透明色)或者rgb、hsl等颜色模式定义颜色。
径向渐变不仅可以应用于背景色,还可以应用于边框色、文本色等属性,在实际开发中灵活使用可以让页面效果更加丰富多彩。