css制作圆柱

CSS 制作圆柱的方法

使用 CSS 可以创建简单的圆柱效果，主要通过 border-radius 和渐变背景实现立体感。以下是两种常见方法：

方法一：纯 CSS 圆柱

通过 border-radius 和线性渐变模拟圆柱侧面：

.cylinder {
  width: 100px;
  height: 200px;
  background: linear-gradient(to right, #ccc, #fff, #ccc);
  border-radius: 50px/10px;
  position: relative;
}

.cylinder:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: #999;
  border-radius: 50px/10px;
}

.cylinder:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: #777;
  border-radius: 50px/10px;
}

方法二：3D 变换增强效果

使用 CSS 3D 变换创造更真实的圆柱：

.cylinder-3d {
  width: 100px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
}

.cylinder-3d:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #aaa, #eee, #aaa);
  border-radius: 50%/10px;
  transform: rotateY(15deg);
}

.cylinder-3d:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100px;
  background: #888;
  border-radius: 50%;
  transform: translateZ(-5px);
}

关键技巧

• border-radius 使用百分比和固定值组合（如 50%/10px）创建椭圆形
• 线性渐变模拟圆柱侧面的光影效果
• 伪元素 :before 和 :after 添加顶部和底部圆面
• 3D 变换增强立体感

浏览器兼容性

现代浏览器均支持这些 CSS 属性。如需支持旧版浏览器，可添加厂商前缀如 -webkit- 和 -moz-。