形状与路径

CSS3为网页设计带来了丰富的形状与路径处理能力，使得开发者能够突破传统矩形布局的限制。从基础几何图形到复杂贝塞尔曲线，这些特性让视觉表现更加灵活。

基本形状绘制

border-radius 属性可以轻松创建圆角矩形甚至圆形。当值设置为50%时，矩形会变成完美的圆形：

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

多边形则需要使用clip-path属性。以下代码创建六边形：

.hexagon {
  width: 100px;
  height: 100px;
  background: #4ecdc4;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

SVG路径转换

CSS3支持将SVG路径语法直接应用于HTML元素。这个心形路径使用了path()函数：

.heart {
  width: 100px;
  height: 100px;
  background: #ff9ff3;
  clip-path: path('M10,30 Q20,10 30,30 T50,30 T70,30 T90,30 L50,90 Z');
}

动态路径动画

结合@keyframes可以实现路径变形动画。这个示例展示圆形到三角形的过渡：

@keyframes morph {
  0% { clip-path: circle(50%); }
  100% { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
}

.shape {
  animation: morph 2s infinite alternate;
}

复杂路径应用

使用offset-path可以让元素沿指定路径运动。这个火箭图标将沿贝塞尔曲线飞行：

<style>
  .track {
    offset-path: path('M20,20 C100,100 300,50 400,150');
    animation: move 3s infinite;
  }
  @keyframes move {
    100% { offset-distance: 100%; }
  }
</style>

<svg class="track" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L4 12l8 10 8-10z"/>
</svg>

形状与文本环绕

shape-outside属性实现了非矩形区域的文本环绕效果。这个示例展示圆形文本环绕：

<div class="wrap">
  <div class="circle"></div>
  <p>这里是环绕文本内容...</p>
</div>

<style>
  .circle {
    width: 150px;
    height: 150px;
    float: left;
    shape-outside: circle(50%);
    background: linear-gradient(to right, #ff9a9e, #fad0c4);
  }
</style>

响应式形状设计

通过CSS变量可以实现响应式形状变化。这个按钮在不同屏幕尺寸下改变形状：

:root {
  --button-shape: 10px;
}

@media (max-width: 768px) {
  :root {
    --button-shape: 50%;
  }
}

.button {
  border-radius: var(--button-shape);
  transition: border-radius 0.3s ease;
}

3D形状变换

CSS 3D变换可以创建立体形状。这个立方体由6个面组成：

<div class="cube">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face right"></div>
  <div class="face left"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
</div>

<style>
  .cube {
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
  }
  .face {
    position: absolute;
    width: 100px;
    height: 100px;
    opacity: 0.8;
  }
  /* 各面位置设置代码省略... */
</style>

路径裁剪的高级应用

多个路径可以组合创建复杂裁剪区域。这个示例使用两个圆形创建月牙形状：

.crescent {
  width: 100px;
  height: 100px;
  background: #feca57;
  clip-path: circle(50% at 50% 50%) 
             circle(40% at 60% 50%);
}

形状与滤镜的结合

CSS滤镜可以增强形状的视觉效果。这个模糊的圆形带有发光效果：

.glow-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #5f27cd;
  filter: blur(5px) drop-shadow(0 0 8px #5f27cd);
}