CSS3 2D转换 CSS3 3D转换 CSS3 动画 CSS3圆角边框 CSS3 多列 CSS3字体 CSS3渐变 CSS3网格布局 CSS3媒体查询 CSS3选择器参考手册 CSS3文字效果 CSS3 过渡

CSS3渐变

栏目： CSS3参考手册发布时间：2024-11-01

CSS 渐变是一种在网页设计中常用的效果，它能够为元素添加平滑的色彩过渡。通过使用 CSS 渐变，您可以创建出吸引人的视觉效果，提升用户体验。本教程将向您介绍 CSS 渐变的类型、使用方法和最佳实践。

CSS 渐变的类型

线性渐变是沿直线平滑过渡的颜色效果。通过指定渐变的起点和终点，您可以创建出不同方向的渐变。例如，从左到右的渐变。

body {  
  background: linear-gradient(to right, #ffd700, #ffff00, #00ff00, #0000ff);  
}

这段代码将整个页面的背景设置为从左到右的线性渐变。渐变的颜色从金色（#ffd700）开始，逐渐过渡到黄色（#ffff00），然后是绿色（#00ff00），最后是蓝色（#0000ff）。通过调整渐变的颜色和位置，您可以根据自己的需求进行自定义，以实现更逼真的视觉效果。

径向渐变是从一个点向外辐射的颜色效果。与线性渐变不同，径向渐变的颜色过渡是围绕一个中心点展开的。这种效果常用于模拟光斑、按钮或其他圆形元素。

div {  
  width: 90px;  
  height: 90px;  
  background: radial-gradient(circle, red, yellow);  
}

这段代码创建了一个 90px x 90px 的 div 元素，并使用径向渐变将其背景设置为从中心点向外扩散的圆形渐变。渐变的颜色从红色过渡到黄色，模拟出光斑的效果。您可以根据需要调整 div 的大小、渐变颜色和中心点的位置，以实现不同的视觉效果。

线性渐变的语法如下：

linear-gradient(angle or direction, color-stop1, color-stop2, ...);

其中，angle 是渐变的角度（例如，45deg），direction 是渐变的方向（例如，to top、to right、to bottom right等），color-stop 是颜色停止点及其对应的颜色值。

径向渐变的语法如下：

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

其中，shape 是形状（例如，circle、ellipse），size 是大小（例如，closest-side、farthest-side等），position 是中心点的位置，color-stop 是颜色停止点及其对应的颜色值。

将 CSS 渐变应用于元素的背景色是一种常见的用法。例如，您可以将线性渐应用于一个 div 元素的背景色，以创建渐变效果：

div {
  background: linear-gradient(to right, red, blue);
}

div {
  background: linear-gradient(to right bottom, red, blue);
}

div {
  background: linear-gradient(0deg, red, blue);
}

div {
  background: linear-gradient(15deg, red, blue);
}

您可以在 CSS 渐变中使用多个颜色停止点，以创建更丰富的颜色过渡效果。例如：

div {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

您可以通过调整形状、大小和位置参数来自定义径向渐变的形状和大小。例如：

div {
  background: radial-gradient(circle at center, red, blue);
}

本文地址：https://www.tides.cn/p_docs-css3-gradient