标签：椭圆 center gradient 百分比 渐变 圆心 radial CSS size
径向渐变
径向渐变就是椭圆渐变，圆是椭圆的特殊形式，径向渐变从圆心点以椭圆的形式向外扩散，渐变的实现由两部分组成：椭圆和色标，椭圆控制渐变的位置、大小和形状；色标控制渐变的颜色和位置。
语法： radial-gradient([[shape|<size>]? [at <position>,]]? <color-stop>[,<color-stop>]+)
演示效果
椭圆
影响椭圆的参数有<position>, <shape>, <size>，分别控制椭圆的圆心、形状和大小
position
<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
shape定义渐变的形状是圆circle还是椭圆ellipse，默认值椭圆。
例5和例6演示了圆形和椭圆形渐变效果
size
size定义渐变的大小，默认值farthest-corner。
size为关键字
closest-side:半径为从圆心到最近边
closest-corner:半径为从圆心到最近角
farthest-side:半径为从圆心到最远边
farthest-corner:半径为从圆心到最远角
例7到例10演示了四个属性值的效果，下面一张图解释了四个属性值所代表的具体含义
size为数值
如果只有一个值时，渐变是圆形的，size值可以是length，表示渐变的半径，不能是百分比，因为浏览器不知道百分比是相对于渐变框的宽度还是高度
如果有两个值时，渐变是椭圆的，表示渐变的水平半径和垂直半径，size值可以是length或百分比，百分比相对于渐变框的宽高。
色标
色标在上一篇文章理解CSS线性渐变linear-gradient中已介绍，径向渐变的色标与之类似，不同的是当渐变不能充满整个渐变框时，浏览器使用最后一种色标的颜色填充剩余区域。
重复渐变(repeating-radial-gradient)
例13演示了重复渐变
上面说过浏览器会使用色标的最后一种颜色填充未充满渐变的区域，但是当使用重复渐变时，浏览器会使用渐变填充未充满渐变的区域
标签：椭圆,center,gradient,百分比,渐变,圆心,radial,CSS,size 来源： https://www.cnblogs.com/yesyes/p/15356477.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。