渐变 CSS linear-gradient

学习笔记 同时被 2 个专栏收录
67 篇文章 0 订阅
12 篇文章 1 订阅
  1. 渐变

渐变(Gradient)是 CSS3 引入的特性,其定义详见 CSS Images Module Level 3。它本质上是一个 2D 图像,可以对 background-imagelist-style-image border 等进行细微着色。

 

  1. 渐变本身是没有固有尺寸的,虽然渐变框有具体大小

要想指定一个渐变效果,只需定义这三个元素,即可:

  • 渐变线(gradient line
  • 渐变线上的起始点(starting point)和结束点(ending point
  • 在起始点和结束点上的颜色值

这样,颜色就会平滑地填充渐变线上的其余部分。

渐变类型,在几何上,可以是:

  • 线段(line):对应 CSS 的线性渐变(linear gradient
  • 射线(ray):对应 CSS 的径向渐变(radial gradient
  • 螺旋(spiral):对应 CSS 的圆锥渐变(conic gradient

类型语法:

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> |

             <radial-gradient()> | <repeating-radial-gradient()> |

             <conic-gradient()>  | <repeating-conic-gradient()>

  1. 渐变三元素:渐变线、起始点和结束点、颜色序列

语法是:

linear-gradient() = linear-gradient(

    [ <angle> | to <side-or-corner> ]?,

    <color-stop-list>

)

/*

参1:角度/渐变颜色走向

to top, to right, to bottom, to left,对应到<angle>分别是 0deg, 90deg, 180deg, 270deg

参2:渐变具体颜色 可接收多个颜色

*/

举例:

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:像素格子 设计师:CSDN官方博客 返回首页

打赏作者

张贺_

谢谢你的棒棒糖~

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值