要創(chuàng)建CSS漸變背景，需使用background或background-image屬性配合漸變函數(shù)。1. 線性漸變：使用linear-gradient()，可設(shè)置方向如to bottom、to right或角度如45deg，實現(xiàn)顏色的直線過渡。2. 徑向漸變：使用radial-gradient()，通過circle或ellipse定義形狀，顏色從中心點向外擴(kuò)散。3. 重復(fù)漸變：使用repeating-linear-gradient()或repeating-radial-gradient()創(chuàng)建條紋或圖案，如每10px的對角線紋。4. 瀏覽器兼容性：為舊版瀏覽器提供純色背景作為回退方案，現(xiàn)代瀏覽器將自動覆蓋為漸變。5. 高級技巧：可添加多個顏色、自定義顏色停止點（如0%到100%）、透明度（rgba）實現(xiàn)遮罩效果，并結(jié)合background-size和background-position精細(xì)控制布局。通過這些方法，僅用幾行代碼即可實現(xiàn)無需圖片的現(xiàn)代背景效果。

Creating a gradient background in CSS is straightforward using the background or background-image property with the linear-gradient(), radial-gradient(), or other gradient functions. Here’s how to do it step by step.

1. Linear Gradient (Most Common)

A linear gradient transitions colors in a straight line — top to bottom, left to right, or at an angle.

Basic Syntax:

background: linear-gradient(direction, color1, color2, ...);

Example – Top to Bottom (default):

.gradient-bg {
  background: linear-gradient(to bottom, #ff7e5f, #feb47b);
}

Example – Left to Right:

.gradient-bg {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

Example – Diagonal (Top-left to Bottom-right):

.gradient-bg {
  background: linear-gradient(45deg, #ff7e5f, #feb47b);
}

You can also use angles (e.g., 135deg) for more control.

2. Radial Gradient

Colors transition from a central point outward in a circular or elliptical shape.

Syntax:

background: radial-gradient(shape size at position, color1, color2, ...);

Example – Circular Gradient:

.gradient-bg {
  background: radial-gradient(circle, #ff7e5f, #feb47b);
}

Example – Elliptical Gradient Centered:

.gradient-bg {
  background: radial-gradient(ellipse at center, #a8edea, #dfe9f3);
}

3. Repeating Gradients

Use repeating-linear-gradient() or repeating-radial-gradient() for patterns.

Example – Striped Pattern:

.striped-bg {
  background: repeating-linear-gradient(
    45deg,
    #ff7e5f,
    #ff7e5f 10px,
    #feb47b 10px,
    #feb47b 20px
  );
}

This creates diagonal stripes every 10px.

4. Adding Fallbacks and Browser Support

Always consider older browsers and provide a solid color fallback.

.gradient-bg {
  background: #ff7e5f; /* Fallback */
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

Modern browsers will override the solid color with the gradient.

5. Advanced Tips

• Multiple Colors: You can include more than two colors.

  background: linear-gradient(to right, red, yellow, blue);

• Color Stops: Define exactly where each color starts.

  background: linear-gradient(to right, #ff7e5f 0%, #feb47b 50%, #a8edea 100%);

• Transparent Gradients: Useful for overlays.

  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));

• Background Size & Position: Combine with background-size or background-position for fine control.

  .gradient-bg {
    background: linear-gradient(45deg, #ff7e5f, #feb47b);
    background-size: cover;
    height: 100vh;
  }

  ---

  Basically, gradients in CSS are flexible and powerful. Start with linear-gradient() for simple effects, then experiment with directions, color stops, and radial patterns. With just a few lines, you can create rich, modern backgrounds without images.

  以上是如何在CSS中創(chuàng)建梯度背景？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！