首页 › CSS › 视觉效果 › 阴影、圆角与边框

圆角

.box {
  border-radius: 8px;               /* 四个角统一 */
  border-radius: 8px 4px;           /* 左上右下 / 右上左下 */
  border-radius: 8px 4px 2px 1px;  /* 上左右下（顺时针）*/

  border-radius: 50%;               /* 圆形 */
}

盒子阴影

.box {
  box-shadow: 2px 4px 8px rgba(0,0,0,0.15);
  /* h-offset v-offset blur color */
}

/* 内阴影 */
.box {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* 多重阴影 */
.box {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1);
}

文字阴影

.text {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  text-shadow: 0 0 10px #1890ff;  /* 发光效果 */
}

border-image

.border-img {
  border: 10px solid transparent;
  border-image: url('border.png') 30 round;
}

outline

.button:focus-visible {
  outline: 2px solid #1890ff;
  outline-offset: 2px;   /* 偏移（避免与 border 重叠） */
}

小结

属性	作用
border-radius	圆角
box-shadow	盒子阴影（支持多重）
text-shadow	文字阴影
border-image	图片边框
outline	轮廓线（不占空间）

上一节：背景与渐变 下一节：2D/3D 变换

贡献者: 布欧-Lewyon