纯 CSS 灯：一步一步

我在本系列的第一部分中写了 CSS 艺术的基本概念。在本部分中，我们将从零开始创建一盏灯。

开始之前，我们先把对象分解成组件形状。这里我们有三个——着色器、腿和脚是基本部分。接下来，我们来创建标记。



<div class = "lamp">
  <div class = "shade"></div>
  <div class = "leg"></div>
  <div class = "foot"></div>
</div>

现在，我们开始使用 CSS。
首先，我们将设置文档，使其完全覆盖整个窗口，并防止任何滚动。此外，我们希望灯位于中心 - 我们可以使用grid和来实现place-items。

在灯内，我们希望组件居中对齐。我们可以使用 flex-box 来实现。



body{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.lamp{
  display: flex;
  flex-direction: column;
  align-items: center;
}

现在，让我们创建组件的基本形状



.shade{
  width: 30vh; 
  height: 20vh;
  background: #EEE4CF;
  border: 1px solid black;
}
.leg{
  width: 2vh; 
  height: 50vh;  
  background: #995136;
  border: 1px solid black;
}
.foot{
  width: 22vh; 
  height: 5vh;
  background: #995136;
  border: 1px solid black;
}

这是结果：（此处使用的边框是为了在下一步中显示形状的重叠）我将其用作高度和宽度的单位，以使其具有响应性并保留纵横比。

vh

现在，我们将使用定位进行微调——将腿和脚稍微抬高一点，以形成透视效果。如果要对元素的默认位置进行微调，我们可以使用相对定位。

此外，支架腿需要位于支架的前方——我们将使用 z-index 来改变这一点。（注意：在这种简单的情况下，显示在最上面的内容也可以通过标记进行调整——元素出现得越晚，它在堆叠上下文中的位置就越高。这里使用它只是作为一个演示，用于更复杂的情况）。



*{
  position:relative;
}

.shade{
  width: 30vh; 
  height: 20vh;
  background: #EEE4CF;
  border: 1px solid black;

  z-index: 3;
}
.leg{
  width: 2vh; 
  height: 50vh;  
  background: #995136;
  border: 1px solid black;

  top: -2vh; 
  z-index:2;
}
.foot{
  width: 22vh; 
  height: 5vh;
  background: #995136;
  border: 1px solid black;

  top: -4vh; 
}

结果：

接下来，我们将详细描述每个形状。

对于阴影，我们需要圆角和梯形 - 我们将使用border-radius和来创建它们clip-path。

为了实现 3D 效果，我们将使用渐变。我们可以将渐变设置为background或background-image。如果渐变仅用于显示阴影，我更喜欢将原色设置为背景，并使用带有 alpha 值的黑/白颜色与结合使用来添加阴影transparent。

此外，由于渐变是从下到上应用的，我们需要注意顺序。

以为例shade，我们应用了四层（从下到上）——沿右侧倾斜边、沿左侧倾斜边、从左到右、顶部为椭圆形。
确定每层的不透明度和角度可能需要反复试验。



.shade{
  width: 30vh; 
  height: 20vh;
  background: #EEE4CF;
  z-index: 3;

  border-radius: 50% / 10%;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  background-image: 
    radial-gradient(closest-corner at 50% 2%, #EEE4CF 70%, transparent 78%),
    linear-gradient(to right, transparent 48%, #ffffff66 58% 75%, transparent 88%),
     linear-gradient(-253deg, #ffffffcc, #E5CB9A 15%, #DBB97C 20%, #EDDBB7 36%, #ffffff33 54%, transparent 95%),
    linear-gradient(253deg, #F8EFDD 20%, transparent)    
}

腿部类似：阴影营造 3D 效果



.leg{
  width: 2vh; 
  height: 50vh;  
  background: #995136;
  top: -2vh; 
  z-index:2;

  background-image: 
    linear-gradient(#00000044, transparent 20% 99.8%, #00000033 100%),
    linear-gradient(to right, transparent 15%, #00000055 36% 44%,  #00000011 60%, #ffffff4f 78% 95%, #9B5539 95%)
}

对于脚，我们将使用半径使其成为椭圆形，使用渐变和阴影赋予它尺寸。



.foot{
  width: 22vh; 
  height: 5vh;
  background: #995136;  
  top: -4vh; 
  border-radius: 50%;
  box-shadow: 0 0.4vh #773321;

  background-image: 
    linear-gradient(to right, transparent 11vh, transparent 12vh, transparent 13vh),
    linear-gradient( 40deg, transparent 5% 24%, #0000001f 28% 36%, #00000011 37% 44%, transparent 50%, #ffffff1c 56%, #ffffff44 68%, #ffffff1c 92%, transparent)
}

就是这样！
你可以在这里找到这支笔：

鏂囩珷鏉ユ簮锛�https://dev.to/poulamic/pure-css-lamp-step-by-step-39i3