单 div CSS 艺术背后的 3 个秘密

1-伪元素：

2-阴影：

3-渐变：

演示

当我开始制作 CSS 绘图时，我并不知道“单 div CSS 艺术”，我对人们只用一个 div 就能绘制出的东西感到非常惊讶，然后我很好奇想知道这些绘图是如何制作的。

我去了 Codepen 并开始进一步了解它们，我发现它们都使用三个组件：“伪元素”、“阴影”和“渐变”。

我将更详细地介绍这三个元素如何帮助您制作单个 div CSS 艺术。

1-伪元素：

是的，它是一个单独的 div，但使用伪元素将为您提供另外两个元素来设置样式：div::before和div::after。

::before 选择器在 div 之前插入一些内容。

::after 选择器在 div 之后插入一些内容。

可以将 div 视为位于这两个选择器之间的元素。

您可以使用“内容”属性插入您想要添加的内容。或者您可以将其保留为空白（内容：“”）并添加宽度/高度、边框、背景来制作形状。

2-阴影：

box-shadow 属性不仅仅用于添加单个阴影，我们还可以设置多个 box-shadow 来生成具有不同颜色、大小、扩散和模糊值的多种形状。

    div {
      border: 1px solid;
      border-radius:50%;
      width: 50px;
      height: 50%;
      padding: 50px;
      box-shadow: 5px 5px blue, 10px 10px red, 15px 15px yellow;
    }

我们可以使用偏移和插入选项来处理这些形状。

3-渐变：

我认为这对于 CSS 艺术来说是一件重要的事情，你总会发现渐变，更多的渐变意味着你的绘画更加复杂。

它还可以通过组合 background-image 属性中的多个渐变来帮助您制作形状。

    div{
      width : 200px;
      height : 100px;
      background: radial-gradient(ellipse at 50% 82%, red 67%, transparent 52%)
    }

演示

就这样，现在我们来举个例子，一起画出这个‘单 div 香水瓶’：

它由三个主要元素组成：

a-黑色元素将是我们的 div。
b- 绿色元素代表 ::before 选择器。
c- 红色元素是::after 选择器。

这是我们的单个 div HTML 元素：

    <div class="perfume"></div>

让我们开始编写 CSS：

因此我们首先要处理的是黑色元素：

这是一个 div 元素，背景颜色为灰色，边框半径为 10 像素，并带有一个 box-shadow 来显示尺寸。注意，我们在这里使用了多重阴影。

    .perfume {
      position: absolute;
      width: 222px;
      height: 328px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: #ececec;
      border-radius: 10px;
      box-shadow: -2px 9px 8px #5d56564a, 0px 1px 3px #888;
      border-width: 1px;
      border-style: ridge;
    }

让我们转到使用 ::before 选择器制作的绿色元素，您可以看到这个元素包含许多形状，我们将使用渐变来制作它们：

这是我们第一个形状的代码，它只不过是多种不同颜色的线性渐变：

    .perfume::before {
      content: '';
      position: absolute;
      display: block;
      width: 164px;
      height: 157px;
      top: -148px;
      background-repeat: no-repeat;
      background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%);
      background-size: 92px 17px;
      background-position: 64px 124px;

    }

我们的第二个形状与前一个形状相同，但尺寸较小且位置不同。

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%);
background-size: 92px 17px, 72px 20px;
background-position: 64px 124px, 74px 101px;

接下来，是一个代表顶部圆圈的径向渐变。注意，我们先添加了这个形状，然后再添加下面的形状。务必从顶部形状开始，这样它就不会被下一个形状覆盖。

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%);
background-size: 92px 17px, 72px 20px, 10px 10px;
background-position: 64px 124px, 74px 101px, 106px 50px;

放置好之前的形状后，现在我们将在其下方添加另一个线性渐变，与第一个相同，但大小和位置不同：

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%);
background-size: 92px 17px, 72px 20px, 10px 10px, 80px 52px;
background-position: 64px 124px, 74px 101px, 106px 50px, 70px 48px;

另一个线性渐变：

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(208, 208, 208, 1) 6%, rgba(207, 207, 207, 1) 7%, rgba(40, 40, 40, 1) 27%, rgba(13, 12, 12, 1) 51%, rgba(40, 40, 40, 1) 70%, rgba(207, 207, 207, 1) 93%, rgba(208, 208, 208, 1) 95%);
background-size: 92px 17px, 72px 20px, 10px 10px, 80px 52px, 92px 17px;
background-position: 64px 124px, 74px 101px, 106px 50px, 70px 48px, 63px 148px;

现在，是时候填充所有这些形状之间的所有空白了，为此我们将添加四个简单的线性渐变：

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(208, 208, 208, 1) 6%, rgba(207, 207, 207, 1) 7%, rgba(40, 40, 40, 1) 27%, rgba(13, 12, 12, 1) 51%, rgba(40, 40, 40, 1) 70%, rgba(207, 207, 207, 1) 93%, rgba(208, 208, 208, 1) 95%), linear-gradient(#434343, #434343), linear-gradient(#939393, #939393), linear-gradient(#2f2f2f, #2f2f2f),
    linear-gradient(#878787, #878787);
background-size: 92px 17px, 72px 20px, 10px 10px, 80px 52px, 92px 17px, 80px 3px, 72px 3px, 76px 6px, 82px 8px;
background-position: 64px 124px, 74px 101px, 106px 50px, 70px 48px, 63px 148px, 70px 46px, 74px 99px, 73px 121px, 70px 140px;

是的，看到这些不同的渐变有点疯狂，每个渐变都有自己的位置、颜色和大小，但这正是让我们的绘图看起来不错的原因。

这就是 ::before 选择器的全部内容，我们完成了顶部部分😌

让我们转到 ::after 选择器并将红色元素添加到我们的绘图中：（别担心，这个很简单😅）

它只是一个具有一些边框半径和两个线性渐变的元素。

    .perfume::after {
      content: '';
      display: block;
      box-sizing: border-box;
      width: 203px;
      height: 292px;
      position: absolute;
      top: 4px;
      left: 10px;
      background-color: #e1e1e1;
      border: 1px solid #1919195e;
      border-top-left-radius: 18px 151px;
      border-top-right-radius: 18px 151px;
      border-bottom-left-radius: 34px;
      border-bottom-right-radius: 34px;
      background-repeat: no-repeat;
      background-image: linear-gradient(#ebebeb, #ebebeb), linear-gradient(#2f2f2f, #2f2f2f);
      background-size: 194px 18px, 190px 1px;
      background-position: 3px 0px, 3px 18px;
    }

我们完成了！🥳

希望你能从中学到一些东西。

查看所有代码@codepen

如果您想了解更多 CSS 内容，请在Twitter上关注我👋

鏂囩珷鏉ユ簮锛�https://dev.to/laasrinadiaa/3-secrets-behind-single-div-css-art-1m64

单个 div CSS 艺术背后的 3 个秘密 1- 伪元素：2- 阴影：3- 渐变：演示

单 div CSS 艺术背后的 3 个秘密

1-伪元素：

2-阴影：

3-渐变：

演示

1-伪元素：

2-阴影：

3-渐变：

演示