CSS渐变

作者: zhaochengqi | 来源:发表于2019-03-01 17:12 被阅读0次

CSS 渐变 是在 CSS3 Image Module 中新增加的 <image> 类型
from MDN

线性渐变 linear-gradient

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型,是一种特别的<image>数据类型。

简单渐变

https://codepen.io/cqbyte/pen/drGMpp

色标

https://codepen.io/cqbyte/pen/MxKeYa

image.png

https://codepen.io/cqbyte/pen/YgwGzb

径向渐变 radial-gradient

CSS radial-gradient() 函数创建一个<image>,用来展示由原点(渐变中心)辐射开的颜色渐变,渐变结束形状是一个椭圆并且和容器的大小比例保持一致(容器的外切椭圆)。这个方法得到的是一个CSS<gradient>数据类型的对象。

image.png

https://codepen.io/cqbyte/pen/yweXqV?editors=1100

相关文章

网友评论

      本文标题:CSS渐变

      本文链接:https://www.haomeiwen.com/subject/wysruqtx.html