当前位置：首页 > CSS

css 3 制作原型

2026-01-28 14:44:00CSS

CSS3 制作圆形的方法

使用 CSS3 可以轻松创建圆形，主要通过 border-radius 属性实现。以下是几种常见的实现方式：

基础圆形 通过设置 border-radius: 50% 将一个正方形元素变为圆形。宽度和高度需相等。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #3498db;
}

圆形边框 为圆形添加边框，需确保边框宽度不影响总尺寸。

.circle-border {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #e74c3c;
  background-color: #f9f9f9;
}

渐变填充圆形 使用 CSS3 渐变填充圆形，增加视觉效果。

.circle-gradient {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1abc9c, #3498db);
}

圆形阴影效果 通过 box-shadow 为圆形添加投影。

.circle-shadow {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #9b59b6;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

动态圆形（动画效果） 结合 CSS3 动画让圆形动起来。

.circle-animate {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #e67e22;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

实际应用示例

以下是一个完整的 HTML 示例，展示上述圆形效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS3 圆形示例</title>
  <style>
    .circle { width: 100px; height: 100px; border-radius: 50%; background-color: #3498db; margin: 20px; }
    .circle-border { width: 100px; height: 100px; border-radius: 50%; border: 3px solid #e74c3c; background-color: #f9f9f9; margin: 20px; }
    .circle-gradient { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, #1abc9c, #3498db); margin: 20px; }
    .circle-shadow { width: 100px; height: 100px; border-radius: 50%; background-color: #9b59b6; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px; }
    .circle-animate { width: 100px; height: 100px; border-radius: 50%; background-color: #e67e22; animation: pulse 2s infinite; margin: 20px; }
    @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
  </style>
</head>
<body>
  <div class="circle"></div>
  <div class="circle-border"></div>
  <div class="circle-gradient"></div>
  <div class="circle-shadow"></div>
  <div class="circle-animate"></div>
</body>
</html>