图像 CSS 上的渐变

CSS 渐变是一种在元素背景中创建渐变效果的方式。渐变可以是线性（Linear）或放射性（Radial）。这使得设计者在创建各种效果时拥有了更大的自由度。本文将详细介绍如何使用 CSS 创建渐变效果。

线性渐变

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction - 渐变的方向。可以是上下（top to bottom）、左右（left to right）、对角线（diagonal）、以及其他自定义方向。

color-stop - 颜色断点。指定在渐变过程中中断的颜色。可以指定多个颜色断点。断点可以是颜色值（如 red）或者具体数值（如 25%）。

示例

以下是创建从上到下的线性渐变的示例：

/* 宽度为 100%、高度为 200px 的 div */
div {
  height: 200px;
  width: 100%;
  /* 创建从上到下的线性渐变 */
  background: linear-gradient(to bottom, #ff9900, #ff6600);
}

该代码块创建了一个从上到下的渐变，渐变的起点颜色为 #ff9900，终点颜色为 #ff6600。在这两个颜色之间会自动平滑过渡。

放射性渐变

语法

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

shape - 渐变的形状。可以是圆形（circle）或椭圆形（ellipse）。

size - 渐变的大小。可以是 closest-side、closest-corner、farthest-side、farthest-corner 这四个值中的任一个。

at position - 渐变的位置。可以是像素、百分比等。默认为元素中心。

start-color 和 last-color - 渐变的起点颜色和终点颜色。

示例

以下是创建从中心向外全屏的放射性渐变的示例：

/* 宽度为 100%、高度为 100% 的 div */
div {
  height: 100%;
  width: 100%;
  /* 创建从中心向外的放射性渐变 */
  background: radial-gradient(circle farthest-corner at center, #ff9900, #ff6600);
}

该代码块创建了一个从中心向外的放射性渐变，渐变的起点颜色为 #ff9900，终点颜色为 #ff6600。渐变半径为定位到最远角的圆形（即全屏）。

渐变背景

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

background-image 属性可以用来将渐变效果作为元素的背景，示例如下：

/* 宽度为 100%、高度为 200px 的 div，背景为从上到下的渐变 */
div {
  height: 200px;
  width: 100%;
  /* 将线性渐变作为背景 */
  background-image: linear-gradient(to bottom, #ff9900, #ff6600);
}

总结

本文介绍了如何使用 CSS 创建线性和放射性渐变。通过简单的语法和示例，可以轻松地实现各种渐变效果。