理解CSS径向渐变radial-gradient

2023-11-21 22:55:04

径向渐变就是椭圆渐变，圆是椭圆的特殊形式，径向渐变从圆心点以椭圆的形式向外扩散，渐变的实现由两部分组成：椭圆和色标，椭圆控制渐变的位置、大小和形状；色标控制渐变的颜色和位置。

语法： radial-gradient([[shape|<size>]? [at <position>,]]? <color-stop>[,<color-stop>]+)

影响椭圆的参数有<position>, <shape>, <size>，分别控制椭圆的圆心、形状和大小

<position>: x轴 y轴

x轴:<length> | <percentage> | left | center | right
y轴:<length> | <percentage> | top | center | bottom

关键字是百分比的特殊表现形式

left -> 0%  center -> 50%  right -> 100%
top: -> 0%  center -> 50%  right -> 100%

例2演示了left center关键字的效果

当属性值为数值时，x轴数值表示圆心在x轴上距离0点（渐变框左上角）的偏移量，y轴数值表示圆心在y轴上距离0点的偏移量。

例3演示了数值效果

当属性值为百分比时，x轴数值相对于渐变框宽度，y轴数值相对于渐变框高度。

例4演示了百分比效果

当属性值只有一个值时，第二值默认center

shape定义渐变的形状是圆circle还是椭圆ellipse，默认值椭圆。

例5和例6演示了圆形和椭圆形渐变效果

size定义渐变的大小，默认值farthest-corner。值可以是关键字、<length>、百分比

closest-side:半径为从圆心到最近边
closest-corner:半径为从圆心到最近角
farthest-side:半径为从圆心到最远边
farthest-corner:半径为从圆心到最远角

例7到例10演示了四个属性值的效果，下面一张图解释了四个属性值所代表的具体含义

如果只有一个值时，渐变是圆形的，size值可以是length，表示渐变的半径，不能是百分比，因为浏览器不知道百分比是相对于渐变框的宽度还是高度

如果有两个值时，渐变是椭圆的，表示渐变的水平半径和垂直半径，size值可以是length或百分比，百分比相对于渐变框的宽高。

色标在上一篇文章理解CSS线性渐变linear-gradient中已介绍，径向渐变的色标与之类似，不同的是当渐变不能充满整个渐变框时，浏览器使用最后一种色标的颜色填充剩余区域。

例13演示了重复渐变

上面说过浏览器会使用色标的最后一种颜色填充未充满渐变的区域，但是当使用重复渐变时，浏览器会使用渐变填充未充满渐变的区域

码农公寓