如何制作具有多个渐变的形状：CSS 技术详解

Android

2024-03-06 15:56:31

如何创建具有多个渐变的形状

问题

想象一下你要创建一个形状，类似于下图所示，其中形状的上半部分从一种颜色渐变到另一种颜色，而下半部分从第三种颜色渐变到第四种颜色。

[图片：带有从颜色 1 到颜色 2 渐变的顶部一半和从颜色 3 到颜色 4 渐变的底部一半的形状]

你知道如何制作具有单个渐变的形状，但你不确定如何将形状分成两半，用 1 个形状制作 2 个不同的渐变。

解决方案

使用 CSS 多重背景

要创建具有两个不同渐变的形状，可以使用 CSS background 属性来设置多个背景。此属性允许你指定多个背景图层，它们将堆叠在彼此之上。

对于给定的示例，你可以使用以下 CSS：

.shape {
  width: 200px;
  height: 200px;
  background:
    linear-gradient(to bottom, #ff0000 0%, #ff0000 50%, #00ff00 50%, #00ff00 100%);
}

此 CSS 将创建一个 200px x 200px 的形状，其中：

顶部一半从红色 (#ff0000) 渐变到绿色 (#00ff00)。
底部一半从绿色 (#00ff00) 渐变到红色 (#ff0000)。

使用 clip-path 创建半圆形

为了创建形状的半圆形，可以使用 CSS clip-path 属性。此属性允许你剪切元素的形状，以使元素的特定部分可见。

对于给定的示例，你可以使用以下 CSS：

.shape {
  width: 200px;
  height: 200px;
  clip-path: circle(50% at 50% 50%);
}

此 CSS 将创建一个 200px x 200px 的圆形形状。

合并技术

将这两个技术结合起来，你可以创建一个具有两个不同渐变的半圆形形状。只需将 clip-path 属性添加到上面显示的 background 属性中：

.shape {
  width: 200px;
  height: 200px;
  background:
    linear-gradient(to bottom, #ff0000 0%, #ff0000 50%, #00ff00 50%, #00ff00 100%);
  clip-path: circle(50% at 50% 50%);
}

此 CSS 将创建一个 200px x 200px 的半圆形形状，其中：

顶部一半从红色 (#ff0000) 渐变到绿色 (#00ff00)。
底部一半从绿色 (#00ff00) 渐变到红色 (#ff0000)。

示例代码

以下是使用上述技术的完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .shape {
      width: 200px;
      height: 200px;
      background:
        linear-gradient(to bottom, #ff0000 0%, #ff0000 50%, #00ff00 50%, #00ff00 100%);
      clip-path: circle(50% at 50% 50%);
    }
  </style>
</head>
<body>
  <div class="shape"></div>
</body>
</html>