关于CSS径向渐变的理解

关于CSS的径向渐变

CSS中的线性渐变已经有很多文章了, 但是径向渐变文章却很少, 一是大家对径向渐变的使用依旧很少, 二是代码依旧非常冗长. 因此在此研究了一下radial-gradient参数.

---

• 关于CSS的径向渐变
  • 标准语法
  • 参数说明

---

标准语法

radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+ )

参数说明

根据实际操作(实际上是Chrome上的测试)

radial-gradient(
    参数1: 形状/大小(半径)  at  中心点位置,
    参数2-...: 起止颜色
)

• 下文中的中心点特指 渐变中心 而不是盒子中心
• 下文中的角/边指的是 background-size 的角/边 (一般默认都是盒子大小)

形状

形状仅有两种可选值 circle (圆形)与 ellipse (椭圆形), 并且这不是主要属性, 仅用作提供半径的默认值

半径

半径的定义来自两种:

• 默认值

  • 若形状设置为 circle , 则默认半径为中心点距离最远的一个角的距离

  background-image: radial-gradient(circle at 0 0, #000, #eee);

  

  • 若形状设置为 ellipse , 则默认横纵半径分别为为中心点距离最远的一个角的距离

  background-image: radial-gradient(ellipse at 0 0, #000, #eee);

  

  以下仅作为深究半径的计算方法的内容, 若不关心可以跳过这部分剩下的计算过程
  以上是建立在中心点为四个角时的结论, 若中心点不在四个角上, 则只有 (其实是统一的)
  

  横向半径纵向半径=中心点到最远的角的横向距离中心点到最远的角的纵向距离$$\frac{横向半径}{纵向半径}=\frac{中心点到最远的角的横向距离}{中心点到最远的角的纵向距离}$$

  根据数学方法 [高中] 我们可以算出横向半径与纵向半径.
  以下假设均建立在中心点在四个角上的时候
  假设 中心点到最远的角的横纵向距离分别为m,n
  椭圆的标准方程为
  

  x2km2+y2kn2=1$$\frac{x^2}{k{m}^2}+\frac{y^2}{k{n}^2}=1$$

  
  将坐标 (m,n) 代入标准方程得到
  

  k=12$$k=\frac{1}{2}$$

  
  因此半长轴和半短轴长度分别为

  a=2√m,b=2√n$$a=\sqrt{2}m,b=\sqrt{2}n$$

  根据上面的结论可以知道, ellipse椭圆形渐变的半径一定是 中心点到最远的角的横纵向距离 的2√$\sqrt{2}$倍

• 设定值—具体值

  • 就是具体半径, 若只写一个半径, 则默认为圆形渐变, 否则必须指定两个半径

  background-image: radial-gradient(50px, #000, #eee);
  // 圆形渐变, 半径为50px
  background-image: radial-gradient(50px 60px, #000, #eee);
  // 椭圆形渐变, 横向半径为50px, 纵向半径为 60px

• 设定值—百分比
  
  • 错误!! 这是径向渐变唯一不能使用百分比指定的地方!!
• 未设定
  
  • 默认值 ellipse

位置

位置即中心点的位置
位置要求一定要跟在第一个参数后面, 并用 at 进行连接

• 默认值
  
  • 默认在盒子的中心位置
• 设定值—具体值
  
  • 这个已经写过很多了, 屏幕坐标系默认盒子左上角为坐标原点, 横向向右为 x 轴, 纵向向下为 y 轴
• 设定值—百分比
  
  • 这个百分比是相对于盒子而言的, 也符合我们一般CSS百分比的要求.

// 举很多个栗子来规范书写
background-image: radial-gradient(ellipse at 0 0, #000, #eee);
// 修改为左上角为中心点
background-image: radial-gradient(50px 60px at 100% 100%, #000, #eee);
// 修改为右下角为中心点
background-image: radial-gradient(at 50px 5em, #000, #eee);
// 什么样的数据都可以

起止颜色

起止颜色用于规定从中心点到渐变边缘的颜色变化, 更多妙用请看线性渐变的介绍

起止颜色, 顾名思义, 至少得有两种颜色
并且每种颜色后允许跟着一个距离值(即距离中心点的距离)

又要举个栗子~~ 就像播放电影, 电影播放的并不是连续画面, 而是一帧一帧的画面, 只是我们的大脑会自动把 (间隔时间较短的) 画面自动连接起来 (又叫做补间动画) 我们就是导演, 负责控制每种颜色具体的位置, 剩下的每两种颜色中间的过渡由浏览器帮我们解决.

在渐变半径之外的部分由最后一个 (止颜色) 填充, 而不是由backgroundColor填充!
当然这是在backgroundSize为整个盒子的时候的效果, 如果background大小仅有一小部分, 那剩下的还是由backgroundColor填充, 例子将在这节后面书写

• 颜色值
  
  • 不多说, skyblue #87ceeb hsla(197, 71%, 73%, 0.6) rgba(137, 207, 235, 0.6) 都是可取的值

• 位置
  首先只能有一个值, 因此如果想达到特殊的效果, 请用径向渐变的叠加效果设置

  • 默认值
    默认值和书写位置有关, 浏览器会先确定那些你书写了的位置的颜色, 然后利用平均分布求出每种颜色应该在的位置, 最特别的, 起颜色默认为 0% , 末颜色默认为 100%
  • 固定值
    固定值就是固定值, 不一样的烟火
    当然, 固定值一定是转化为百分比进行使用的 (计算公式当然是 固定值/半径=百分比)
    在转化为百分比的过程中, 半径一定指的是横向的半径 (即 固定值/横向半径=百分比)

  width: 300px;
  height: 200px;
  background-image: radial-gradient( #000, #eee 100px, #000);

  

  width: 200px;
  height: 300px;
  background-image: radial-gradient( #000, #eee 100px, #000);

  

  • 百分比
    百分比是相对于半径而言的!!
    百分比是相对于半径而言的!!
    百分比是相对于半径而言的!!
    在上面我们看到了, 不设置半径时的默认值并不是中心点到某条边的距离, 因此如果想精确地定位到固定位置, 建议提前设定好渐变半径以方便操作

关于径向渐变的参数介绍就到这了, 但是对于它的研究以及各种样式的研究以及例如background-repeat的使用技巧还需要不断加强~

后续有时间再分析各种样式~