css制作圆柱

使用CSS制作圆柱体

通过CSS的渐变和阴影效果可以模拟圆柱体的外观。以下是一种实现方法：

HTML结构

<div class="cylinder">
  <div class="top"></div>
  <div class="side"></div>
  <div class="bottom"></div>
</div>

CSS样式

.cylinder {
  position: relative;
  width: 100px;
  height: 200px;
  margin: 50px auto;
}

.top, .bottom {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #fff, #ccc);
}

.top {
  top: 0;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.side {
  position: absolute;
  top: 50px;
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, #ddd, #aaa, #ddd);
  border-radius: 0 0 5px 5px;
}

.bottom {
  bottom: 0;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

3D圆柱体效果增强

要创建更逼真的3D效果，可以添加变换和动画：

.cylinder-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
  animation: rotate 5s infinite linear;
}

@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.top-3d {
  transform: translateZ(50px);
}

.side-3d {
  transform: rotateX(90deg) translateZ(50px);
  height: 100px;
}

.bottom-3d {
  transform: translateZ(-50px);
}

使用CSS变量自定义圆柱体

通过CSS变量可以轻松调整圆柱体的尺寸和颜色：

:root {
  --cylinder-width: 80px;
  --cylinder-height: 150px;
  --cylinder-color: #6a8fd4;
}

.custom-cylinder {
  width: var(--cylinder-width);
  height: var(--cylinder-height);
}

.custom-cylinder .side {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--cylinder-color), white 20%),
    var(--cylinder-color),
    color-mix(in srgb, var(--cylinder-color), black 20%)
  );
}

这些方法结合了CSS的多种特性来创建圆柱体效果，可以根据需要调整尺寸、颜色和视觉效果。