悟了悟了，妈妈再也不用担心我不会background-image之径向渐变篇

在我的上一篇写线性渐变的文章中留下一个小太阳咋画上去的悬念，就是用到了今天我要详细讲解的radial-gradient()

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color)

示例

按照惯例，先来个最简单的demo：

div {
    width: 300px;
    height: 200px;
    background-image: radial-gradient(red, black)
}

可以看到，默认是椭圆形的渐变效果，我们试着把它变成圆形的：

div {
    background-image: radial-gradient(circle, red, black)
}

我们发现这个圆不完整，为啥？？？因为默认的 size 是 farthest-corner 即最远的角，我们试着改成最远的边试试：

div {
    background-image: radial-gradient(circle farthest-side, red, black)
}

这样我们看到了一整个完整的圆了，那么我们又有疑问了，我们想要让这个圆出现在其他位置而不是正中间，这真是一个好问题，我们试着把它画在div的左上角：

div {
    background-image: radial-gradient(circle closest-side at 250px 50px, red, black)
}

聪明的你又发现了一个问题，我们画的圆必须接触到某个边或者某个角才行，我们是否想过这样一个问题，我希望这个圆出现在任意地方？咱们继续：

div {
    background-image: radial-gradient(circle 20px at 250px 50px, red, black)
}

漂亮！接下来研究下颜色怎么设置，我们先搞个多种颜色：

div {
    background-image: radial-gradient(circle, red, green, blue)
}

能否支持类似线性渐变那样的停止标记？答案是肯定的：

div {
    background-image: radial-gradient(circle, red, green 10%, blue)
}

海上日出效果图：

最后附上上一篇的完整代码：

div {
    position: relative;
    width: 300px;
    height: 200px;
    background-image: linear-gradient(red, orange, yellow 50%, blue 40%, purple);
}
div::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: radial-gradient(circle 30px at center 70px, red, yellow); 
    opacity: 0.3;
}

参数说明：

• shape: 形状（只有椭圆和圆两种）
  • ellipse 椭圆（默认）
  • circle 圆
• size: 尺寸
  • 关键字型：
    • farthest-corner: 距离圆心最远的角（默认）
    • farthest-side: 距离圆心最远的边
    • closest-corner: 距离圆心最近的角
    • closest-side: 距离圆心最近的边
  • 数值型（支持px,em,pt等尺寸单位，不支持 %!!!）
    • 20px ✔
    • 30em ✔
    • 40pt ✔
    • 50% ✖
• position: 位置（前面必须加at!!!）
  • 关键字型（9种）：
    • center 正中（默认）等同于 center center
    • top 顶部 等同于 center top
    • left 左侧 等同于 left center
    • right 右侧 等同于 right center
    • bottom 底部 等同于 center bottom
    • left top 左上 也可写成 top left（下同）
    • right top 右上
    • left bottom 左下
    • right bottom 右下
  • 数值型：（支持px,em,pt,%等尺寸单位）
    • 10px 2em ✔
    • 20pt 30% ✔
    • 30px 只写一个值的都是 ... center的简写，此处为30px center
• start-color: 开始颜色（和线性渐变的颜色一样）
• last-color: 结束颜色（和线性渐变的颜色一样）

结语

今天是最后一天上班，大家都放假了吗？提前祝大家新年快乐！！！

完结，撒花~~~