插件窝 干货文章 如何用CSS代码实现从#072a73到黑色的径向渐变背景?

如何用CSS代码实现从#072a73到黑色的径向渐变背景?

渐变 gradient background radial 504    来源:    2025-03-25

实现从#072a73到黑色的径向渐变背景

要使用CSS创建一个从深蓝色(#072a73)到黑色的径向渐变背景,你可以使用radial-gradient()函数。以下是几种实现方式:

基本实现

.element {
  background: radial-gradient(circle, #072a73, black);
}

更详细的参数设置

.element {
  background: radial-gradient(
    circle at center,  /* 圆形渐变,中心为起点 */
    #072a73 0%,        /* 起始颜色和位置 */
    black 100%        /* 结束颜色和位置 */
  );
}

添加浏览器前缀的完整版本(兼容性更好)

.element {
  background: -moz-radial-gradient(center, circle, #072a73 0%, black 100%);
  background: -webkit-radial-gradient(center, circle, #072a73 0%, black 100%);
  background: radial-gradient(circle at center, #072a73 0%, black 100%);
}

扩展选项

  1. 调整渐变形状

    /* 椭圆形渐变 */
    background: radial-gradient(ellipse at center, #072a73, black);
    
  2. 调整渐变中心位置

    /* 渐变中心在左上角 */
    background: radial-gradient(circle at top left, #072a73, black);
    
  3. 添加中间色标

    background: radial-gradient(circle, #072a73, #041a40 50%, black);
    
  4. 设置渐变大小

    /* 渐变覆盖最近边 */
    background: radial-gradient(closest-side circle, #072a73, black);
    

你可以根据实际需求调整这些参数,获得最佳的视觉效果。