CSS 渐变样式

爆浆麻花
369 阅读4分钟

MDN介绍： CSS 渐变 <image> 类型的一种特殊类型 <gradient> 表示，由两种或多种颜色之间的渐进过渡组成。

类型： linear-gradient radial-gradient conic-gradient 特殊类型： repeating-linear-gradient repeating-radial-gradient

linear-gradient

MDN定义：创建一个表示两种或多种颜色线性渐变的图片。（ps：根据定义的参数，生成某一个方向直线的平稳颜色渐变）

参数：

  1. 渐变方向
  2. 起始颜色
  3. 终止颜色

linear-gradient(渐变方向,起始颜色 起始位置 终止位置,终止颜色)

注意：

  1. 渐变方向可以为空,默认值为bottom(从上往下)

  2. 起始颜色与终止颜色是必填，中间可以增加多个过渡颜色无数量限制

  3. 每个颜色可以设置起始位置与终止位置，最多只能填两个位置，中间不可以增加其他位置参数，起始位置与终止位置可以不填写。

  4. 如果每个颜色都有起始位置与终止位置且颜色位置不能填充整个容器时，颜色与颜色之间的间隙会形成渐变，颜色与容器的空白区域会由当前颜色直接填充

// 第四点🌰
background-image: linear-gradient(
    red 10px 20px,
    yellow 30px,
    blue 50px 60px);

repeating-linear-gradient

MDN定义： 一个由重复线性渐变组成的图片

参数：

  1. 渐变方向
  2. 起始颜色
  3. 终止颜色

repeating-linear-gradient(渐变方向,起始颜色 起始位置 终止位置,终止颜色)

注意：

  1. 渐变方向可以为空,默认值为bottom(从上往下)
  2. 起始颜色与终止颜色是必填，中间可以增加多个过渡颜色无数量限制
  3. 每个颜色可以设置起始位置与终止位置，最多只能填两个位置，中间不可以增加其他位置参数，起始位置与终止位置可以不填写。
  4. 如果起始颜色起始位置不为容器开始位置，则会被终止颜色填充，如果终止颜色终止位置不为容器结束位置，则会被循环填充，中间颜色位置没有衔接上则会被渐变色填充
.item-1{
width:100px;
height:100px;
background: repeating-linear-gradient(to left, red 10px 20px, yellow 30px 40px,blue);
}

QQ20220106-211104@2x.png

作用： 使用这个属性可以自己实现一个分割线，以满足UI的奇怪要求

height: 1px;
background-image: repeating-linear-gradient(
			45deg,
      transparent 0px,
      transparent 10px,
      rgba(0,0,0,1) 10px,
      rgba(0,0,0,1) 20px
);

radial-gradient

MDN定义： 由从原点发出的两种或者多种颜色之间的逐步过渡组成，可以形成圆形渐变或者椭圆形渐变

参数：

  1. 原点位置，设置X轴与Y轴的位置（🌰：(top left)，(25% 75%)，(bottom 50px right 100px)，(right 35% bottom 45%)）
  2. 渐变形状（默认为ellipse，可选值：circle，ellipse）
  3. 大小（默认为farthest-corner，可选值：farthest-corner，closest-side，closest-corner，farthest-side）
  4. 起止颜色

radial-gradient（形状 大小 at 位置，起始颜色，. . .，终止颜色）

注意：

  1. 起始颜色与终止颜色是必填，中间可以增加多个过渡颜色无数量限制

  2. 每个颜色可以设置起始位置与终止位置，最多只能填两个位置，中间不可以增加其他位置参数，起始位置与终止位置可以不填写。

  3. 如果每个颜色都有起始位置与终止位置且颜色位置不能填充整个容器时，颜色与颜色之间的间隙会形成渐变，颜色与容器的空白区域会由当前颜色直接填充

repeating-radial-gradient

MDN定义： 从原点向所有方向辐射且会重复颜色直到覆盖其整个容器。

参数：

  1. 原点位置，设置X轴与Y轴的位置（🌰：(top left)，(25% 75%)，(bottom 50px right 100px)，(right 35% bottom 45%)）
  2. 渐变形状（默认为ellipse，可选值：circle，ellipse）
  3. 大小（默认为farthest-corner，可选值：farthest-corner，closest-side，closest-corner，farthest-side）
  4. 起止颜色

repeating-radial-gradient（形状 大小 at 位置，起始颜色，. . .，终止颜色）

注意：

  1. 起始颜色与终止颜色是必填，中间可以增加多个过渡颜色无数量限制
  2. 每个颜色可以设置起始位置与终止位置，最多只能填两个位置，中间不可以增加其他位置参数，起始位置与终止位置可以不填写。
  3. 如果起始颜色起始位置不为容器开始位置，则会被终止颜色填充，如果终止颜色终止位置不为容器结束位置，则会被循环填充，中间颜色位置没有衔接上则会被渐变色填充

conic-gradient

MDN定义： 由与颜色转换的梯度的图像的旋转围绕中心点（而不是从中心辐射）。圆锥渐变示例包括饼图和色轮。

参数：

  1. 开始原点的准线方向
  2. 原点位置
  3. 起止颜色

conic-gradient（from 方向 at 位置，起始颜色，. . .，终止颜色）

avatar
文章
阅读
粉丝