当前位置：首页 > CSS

css3手工制作图片

2026-01-27 23:37:30CSS

使用CSS3手工制作图片

CSS3可以通过纯代码实现简单的图形绘制，利用border、box-shadow、gradient等属性模拟图片效果。以下是几种常见图形的实现方法：

绘制圆形

通过border-radius属性将元素设置为圆形，配合背景色或渐变：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

绘制三角形

利用border的透明特性实现三角形：

css3手工制作图片

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #4CAF50;
}

绘制心形

结合::before和::after伪元素旋转叠加：

.heart {
  width: 50px;
  height: 50px;
  position: relative;
  transform: rotate(-45deg);
  background: #ff0000;
}
.heart::before, .heart::after {
  content: '';
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ff0000;
  position: absolute;
}
.heart::before { top: -25px; left: 0; }
.heart::after { top: 0; left: 25px; }

绘制渐变背景

使用linear-gradient或radial-gradient创建复杂背景：

css3手工制作图片

.gradient-bg {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #e66465, #9198e5);
}

添加阴影效果

通过box-shadow增强立体感：

.shadow-box {
  width: 120px;
  height: 120px;
  background: #3498db;
  box-shadow: 10px 10px 5px rgba(0,0,0,0.3);
}

组合复杂图形

叠加多个元素实现图标（如相机）：

.camera {
  width: 100px;
  height: 80px;
  background: #333;
  border-radius: 10px;
  position: relative;
}
.camera::before {
  content: '';
  width: 40px;
  height: 40px;
  border: 5px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 30px;
}