线性渐变 linear-gradient()

/* 【默认方向】从上到下 */
linear-gradient(white, skyblue);
/* 使用关键字to表示渐变方向【常用】 */
linear-gradient(to right, white, skyblue);
linear-gradient(to right bottom, white, skyblue);
/* 使用角度值表示渐变方向 */
linear-gradient(45deg, white, skyblue);
linear-gradient(.25turn, white, skyblue);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

角度值：垂直方向为 0deg，顺时针旋转，45deg 的渐变方向是从左下角到右上角

渐变分界线

  • 颜色值在前，分界线位置在后
linear-gradient(white, skyblue 50%);
  • 1.
  • 未指定分界线位置，则颜色等分
linear-gradient(red, orange, yellow, green);
/* 等同于 */
linear-gradient(red 0%, orange 33.33%, yellow 66.66%, green 100%);
  • 1.
  • 2.
  • 3.
  • 分界线位置可以是负数，也可以大于100%。

如果不是高清显示器，则在Chrome浏览器中，不同颜色位于同一断点位置的时候，两个颜色连接处可能会有明显的锯齿。

优化方案：在颜色连接处留1px的过渡区间，优化视觉表现

linear-gradient(30deg, red 50%, skyblue calc(50% + 1px));
  • 1.

颜色转换点

linear-gradient(white, 70%, skyblue);
  • 1.

表示白色和天蓝色渐变的中心转换点位置在70%，可以用来模拟更符合真实世界的立体效果（IE暂不支持）

【实战】绘制占位图


径向渐变 radial-gradient()

background-image: radial-gradient(white, deepskyblue);
  • 1.

渐变半径

radial-gradient(50px 50%, white, deepskyblue); /* 水平半径为50px 垂直半径为50% */
  • 1.
radial-gradient(50px, white, deepskyblue); /* 水平半径和垂直半径都是50px */
  • 1.

水平半径和垂直半径合写的时候，只能是长度值，不能是百分比值

radial-gradient(50% 50%, white, deepskyblue);  /* 使用百分比值，就必须给出两个值 */
  • 1.

渐变中心点

渐变中心点在左上角

radial-gradient(100px at 0 0, white, deepskyblue);
radial-gradient(100px at left top, white, deepskyblue);
  • 1.
  • 2.

渐变的中心点在距离右边缘和下边缘100px的位置

radial-gradient(100px at right 100px bottom 100px, white, deepskyblue);
  • 1.

渐变终止点

关键字

描述

closest-side

渐变中心距离容器最近的边作为终止位置

closest-corner

渐变中心距离容器最近的角作为终止位置

farthest-side

渐变中心距离容器最远的边作为终止位置

farthest-corner

默认值。渐变中心距离容器最远的角作为终止位置

radial-gradient(farthest-corner circle at right 100px bottom 100px, white, deepskyblue);
  • 1.
  • 关键字ellipse——椭圆【默认】
  • 关键字circle——圆

如果只有1个值，或者出现了circle关键字，后面的值只能是长度值，不能是百分比值

  • at position的位置是固定的，其一定是在半径值的后面、渐变断点的前面

【实战】高光按钮，炫彩按钮，点击按钮–圆形扩散，波形效果–优惠劵


锥形渐变 conic-gradient()


重复渐变

repeating-linear-gradient(transparent, deepskyblue 40px);
repeating-radial-gradient(transparent, deepskyblue 40px);
repeating-conic-gradient(transparent, deepskyblue 40deg);
  • 1.
  • 2.
  • 3.

起止颜色位置需要明确定义

【实战】条纹边框

.stripe-border {
    width: 150px; height: 200px;
    border: 20px solid;
    border-image: repeating-linear-gradient(135deg, deepskyblue 0 6px, white 7px 12px) 20;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

CSS【详解】渐变（含线性渐变 linear-gradient()，径向渐变 radial-gradient()，锥形渐变 conic-gradient()，重复渐变）_css