CSS 圆角、阴影与透明度

盒模型解决的是盒子的骨架问题，这一篇给盒子化妆。圆角、阴影、透明度三个属性，是日常开发里出镜率最高的修饰手段，把它们玩熟，页面质感立刻上一个档次。

border-radius 圆角

border-radius 把盒子的四个角变圆，取值是长度或百分比。

.box {
  border-radius: 8px;
}

一个值管四个角，四个值按顺时针依次管左上、右上、右下、左下，两个值是左上右下、右上左下。百分比按盒子宽高的比例算，用 50% 能变出圆形。

.avatar {
  border-radius: 50%;
}
.pill {
  border-radius: 999px;
}

头像用 50% 变正圆。胶囊按钮不用量尺寸，直接给个超大值 999px，浏览器会自动按高度的一半取整，永远是最圆润的样子，这是两种最经典的圆角用法。做卡片时给个 8 到 12 像素的小圆角，是设计稿里的常规操作。

box-shadow 阴影

box-shadow 给盒子加阴影，有四个核心参数，水平偏移、垂直偏移、模糊半径、阴影颜色，偏移值为正时阴影往右往下。

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

上面是卡片最常见的阴影写法，垂直偏移 2 像素，模糊 8 像素，半透明白色系阴影。做按钮悬浮效果时，加大模糊半径和偏移，配合 hover 过渡，卡片就有”浮起来”的感觉。

box-shadow 还能加第五个参数扩展半径，正值让阴影往外扩一圈，负值往里收。加 inset 关键字，阴影变内阴影，凹陷的效果。

.btn {
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

多个阴影用逗号分隔，可以叠加，外阴影配内阴影、多层发光都可以。注意阴影不占布局空间，不影响其他元素的位置。

opacity 与透明色的区别

opacity 设置整个元素的透明度，0 完全透明，1 完全不透明，取值之间是渐变。它最大的特点是”整体”，元素、边框、里面的文字，全部一起变透明。

.box {
  opacity: 0.5;
}

如果只想让背景半透明、文字保持清晰，用 rgba 透明色，它只作用于设置它的那个属性。

.box {
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

背景半透明，文字全不透明，遮罩层和弹窗底下的半透明背景就是这么做的。两者的区别一句话，opacity 管整体，rgba 管单层。

组合实战

三个属性组合起来，就是现在流行的卡片风格。

<div class="card">
  <h3>今日推荐</h3>
  <p>这是今天为你挑选的文章。</p>
</div>

.card {
  width: 280px;
  padding: 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

白色卡片、小圆角、柔和阴影，hover 时阴影加深，页面立刻有了层次。这些属性还都能参与过渡动画，后面的课程会专门讲。

小结

圆角做形状，阴影做层次，透明度做叠加。圆角记住 50% 圆形和 999px 胶囊两个大招，阴影记住偏移加模糊加透明色，透明度分清 opacity 和 rgba 的区别。下一篇离开盒子内部，开始处理内容本身，字体样式。