css制作渐变

CSS 渐变基础

CSS 渐变用于创建两种或多种颜色之间的平滑过渡效果，主要分为线性渐变和径向渐变两种类型。渐变可以应用于背景、边框、文本等元素。

线性渐变 (linear-gradient)

线性渐变沿着一条直线方向进行颜色过渡，语法如下：

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

方向参数可以是角度（如 90deg）或关键词（如 to right）。颜色停点定义渐变中颜色的位置和变化。

示例：从左到右的红色到蓝色渐变

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

径向渐变 (radial-gradient)

径向渐变从中心点向外辐射状渐变，语法如下：

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

形状可以是 circle 或 ellipse，位置定义中心点坐标。

示例：圆形径向渐变从中心向外由黄色变为绿色

div {
  background: radial-gradient(circle, yellow, green);
}

渐变方向控制

线性渐变方向可通过角度或关键词调整：

• to top：从下到上
• to right：从左到右
• 45deg：45度角方向

示例：对角线渐变

div {
  background: linear-gradient(45deg, red, yellow);
}

颜色停点控制

通过百分比或具体长度值控制颜色过渡位置：

div {
  background: linear-gradient(to right, red 0%, blue 50%, green 100%);
}

重复渐变 (repeating-linear-gradient)

创建重复模式的渐变效果：

div {
  background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
}

浏览器兼容性

现代浏览器都支持CSS渐变，对于旧版浏览器可添加前缀：

div {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1-6 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1-12 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6-15 */
  background: linear-gradient(red, blue); /* 标准语法 */
}

渐变应用实例

1. 按钮渐变效果：

   button {
   background: linear-gradient(to bottom, #4CAF50, #2E8B57);
   border: none;
   color: white;
   padding: 10px 20px;
   }

2. 文本渐变效果：

   h1 {
   background: linear-gradient(to right, red, orange);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   }

3. 边框渐变：

   

   div {
   border: 5px solid transparent;
   border-image: linear-gradient(to right, red, blue) 1;
   }