关于CSS径向渐变的理解

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

    circle 默认半径

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

    ellipse 默认半径

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

    = 横 向 半 径 纵 向 半 径 = 中 心 点 到 最 远 的 角 的 横 向 距 离 中 心 点 到 最 远 的 角 的 纵 向 距 离

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

    x2km2+y2kn2=1 x 2 k m 2 + y 2 k n 2 = 1

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

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

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

    横向半径展示1

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

    横向半径展示2

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

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

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

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值