一、边框圆角（border-radius）：打造柔和视觉边界

1.1 基础语法与属性解析

border-radius 是CSS中用于创建圆角边框的核心属性，通过控制元素的四个角（左上、右上、右下、左下）的曲率半径实现视觉软化。其语法支持简写与分写形式：

/* 简写形式：四个值按顺时针方向 */
.element { border-radius: 10px 20px 30px 40px; }
/* 分写形式：精确控制每个角 */
.element {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

1.2 椭圆与圆形实现技巧

当两个相邻角的半径值相等时，可形成1/4椭圆；若四个角半径均为元素宽高的一半，则生成完美圆形：

/* 生成圆形（假设元素为正方形） */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
/* 生成椭圆形 */
.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
}

1.3 实战场景：按钮与卡片设计

在UI组件开发中，圆角常用于提升交互友好性：

/* 圆角按钮 */
.btn-primary {
  padding: 12px 24px;
  border-radius: 6px;
  background: #4285f4;
  color: white;
}
/* 卡片组件 */
.card {
  width: 300px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  overflow: hidden; /* 防止内容溢出破坏圆角 */
}

关键点：当元素包含背景图或子元素时，需添加 overflow: hidden 确保圆角效果完整。

二、盒子阴影（box-shadow）：增强层次感

2.1 阴影参数详解

box-shadow 支持多组阴影叠加，每组参数包含：水平偏移、垂直偏移、模糊半径、扩散半径、颜色：

.box {
  box-shadow: 
    2px 2px 4px 0 rgba(0,0,0,0.2), /* 主阴影 */
    -2px -2px 4px 0 rgba(255,255,255,0.5); /* 高光模拟 */
}

2.2 阴影类型与视觉效果

• 内阴影：使用 inset 关键字创建凹陷效果

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

• 长阴影：通过大偏移量与低模糊度实现

  .long-shadow {
  box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
  }

2.3 性能优化建议

• 避免过度使用多层阴影（建议不超过3层）
• 优先使用RGB颜色而非HEX以实现透明度控制
• 对移动端考虑使用 will-change: transform 提升动画性能

三、浮动布局（Float）：传统布局方案

3.1 浮动基础与清除

浮动最初用于文字环绕图片，后发展为布局工具：

.float-left { float: left; margin-right: 20px; }
.float-right { float: right; margin-left: 20px; }
/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

3.2 多列布局实现

.column-layout {
  width: 100%;
}
.column-layout .col {
  float: left;
  width: 30%;
  margin: 0 1.5%;
}

缺陷：需手动计算宽度与边距，对高度不一的列需额外处理。

四、Flex布局：现代响应式方案

4.1 容器与项目属性

Flex布局通过 display: flex 激活，核心属性分为两类：

• 容器属性：flex-direction, justify-content, align-items, flex-wrap
• 项目属性：order, flex-grow, flex-shrink, align-self

4.2 经典布局场景

4.2.1 水平垂直居中

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

4.2.2 等分布局

.equal-columns {
  display: flex;
}
.equal-columns .col {
  flex: 1; /* 均分剩余空间 */
  padding: 15px;
}

4.2.3 圣杯布局实现

.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.holy-grail-body {
  display: flex;
  flex: 1;
}
.holy-grail-content {
  flex: 1;
  order: 2;
}

4.3 响应式适配技巧

• 使用 flex-wrap: wrap 实现自动换行
• 结合媒体查询调整 flex-direction

  @media (max-width: 768px) {
  .responsive-flex {
    flex-direction: column;
  }
  }

五、综合应用案例：卡片列表设计

<div class="card-container">
  <div class="card">
    <div class="card-image" style="background-image: url(...)"></div>
    <div class="card-content">
      <h3>标题</h3>
      <p>描述内容...</p>
    </div>
  </div>
</div>

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}
.card {
  flex: 1 1 300px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.card-image {
  height: 180px;
  background-size: cover;
}

六、技术选型建议

1. 简单组件：优先使用 border-radius + box-shadow
2. 传统多列布局：浮动布局（需清除浮动）
3. 复杂响应式：Flex布局（推荐现代项目）
4. 网格系统：考虑CSS Grid（适合二维布局）

性能对比：Flex布局在重绘效率上优于浮动布局，尤其在动态内容场景下表现更优。建议新项目优先采用Flex方案，同时掌握浮动布局以维护遗留系统。