CSS3背景渐变效果实现

CSS 渐变效果详解：线性、径向与重复径向

最新推荐文章于 2024-08-11 22:28:32 发布

原创最新推荐文章于 2024-08-11 22:28:32 发布 · 617 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

前端Vscode 专栏收录该内容

25 篇文章

订阅专栏

本文深入探讨了CSS中的三种渐变效果：线性渐变、径向渐变及重复径向渐变。通过实例代码，详细解释了它们的基本语法、方向设置和颜色过渡。线性渐变允许指定角度创建不同方向的过渡，而径向渐变则支持圆形或椭圆形的色彩扩散。此外，重复径向渐变可创建周期性的色彩图案。这些渐变技术为网页设计提供了丰富的视觉效果。

文章目录

1.线性渐变

基本语法：

background:linear-gradient(direction,color-1,color-2,...);

direction指明线性渐变的方向，默认是从上到下，css也预定义了一些方向可以选择，to right是从左到右的线性渐变，to bottom right是从左上角到右下角的线性渐变。
除了预定义方向，可以定义角度，0deg指创建从下到上的渐变，90deg将创建从左到右的渐变。
color-1是起点的颜色，color-2是过渡后的颜色

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
      #box1{
        width:100px;
        height: 100px;
        border-radius: 50%;
        background-image: linear-gradient(45deg,rgb(216, 204, 238) 30%,rgb(241, 153, 93) 60%);
      }
      
      
    </style>  
  </head>

  <body>
   <div id="box1"></div>
</body>
</html>

在这里插入图片描述

2.径向渐变

基本语法：

blackground：radial-gradient（shape，start-color，...last-color）;

默认情况下，渐变的中心是center，渐变的形状是ellipse（椭圆形），渐变的大小是farthest-corner（表示到最远的角落）
shape参数定义形状，其值可以是circle（圆形）或ellipse（椭圆形）

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
      #box2{
        width:100px;
        height: 100px;
        border-radius: 50%;
        background-image: radial-gradient(circle at 50% 50%,rgb(180, 126, 126),rgb(216, 204, 238) 30%,rgb(241, 153, 93) 45%);
      }
      
    </style>  
  </head>

  <body>
   <div id="box1"></div>
   <div id="box2"></div>
</body>
</html>