欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于CSS径向渐变的理解

程序员文章站 2022-05-31 09:36:15
...

关于CSS的径向渐变

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



标准语法

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);

    关于CSS径向渐变的理解

    • 若形状设置为 ellipse , 则默认横纵半径分别为为中心点距离最远的一个角的距离
    background-image: radial-gradient(ellipse at 0 0, #000, #eee);

    关于CSS径向渐变的理解

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

    =

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

    x2km2+y2kn2=1

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

    因此半长轴和半短轴长度分别为
    a=2m,b=2n

    根据上面的结论可以知道, ellipse椭圆形渐变的半径一定是 中心点到最远的角的横纵向距离 的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);

    关于CSS径向渐变的理解

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

    关于CSS径向渐变的理解

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

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

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