边框与阴影 - JOJO

边框和阴影是构建视觉层次的基础。从简单的实线边框到复杂的渐变边框，从微妙的阴影到立体的悬浮效果，掌握这些属性能让你的界面更加精致。

边框基础

border 简写

.box {
  border: 1px solid #e5e7eb;
}

/* 完整语法：宽度 样式 颜色 */
.box-full {
  border: 2px dashed #3b82f6;
}

单边设置

.top-only {
  border-top: 2px solid #3b82f6;
}

.bottom-accent {
  border-bottom: 3px solid #10b981;
}

.left-bar {
  border-left: 4px solid #f59e0b;
}

border-width

.widths {
  border-style: solid;
  border-color: #e5e7eb;

  /* 单值 */
  border-width: 2px;

  /* 上下 左右 */
  border-width: 1px 2px;

  /* 上 左右 下 */
  border-width: 1px 2px 3px;

  /* 上 右 下 左 */
  border-width: 1px 2px 3px 4px;
}

border-style

.solid {
  border-style: solid;
} /* 实线 */
.dashed {
  border-style: dashed;
} /* 虚线 */
.dotted {
  border-style: dotted;
} /* 点线 */
.double {
  border-style: double;
} /* 双线 */
.groove {
  border-style: groove;
} /* 凹槽 */
.ridge {
  border-style: ridge;
} /* 凸脊 */
.inset {
  border-style: inset;
} /* 内嵌 */
.outset {
  border-style: outset;
} /* 外凸 */
.none {
  border-style: none;
} /* 无边框 */
.hidden {
  border-style: hidden;
} /* 隐藏 */

border-color

.colors {
  border-style: solid;
  border-width: 2px;

  /* 单色 */
  border-color: #3b82f6;

  /* 四边不同色 */
  border-color: #ef4444 #10b981 #3b82f6 #f59e0b;
}

/* 透明边框（用于悬停效果） */
.hover-ready {
  border: 2px solid transparent;
}

.hover-ready:hover {
  border-color: #3b82f6;
}

圆角

border-radius 基础

.rounded-sm {
  border-radius: 4px;
}
.rounded {
  border-radius: 8px;
}
.rounded-lg {
  border-radius: 12px;
}
.rounded-xl {
  border-radius: 16px;
}
.rounded-2xl {
  border-radius: 24px;
}
.rounded-full {
  border-radius: 9999px;
} /* 圆形/胶囊 */

单角设置

.top-left {
  border-top-left-radius: 16px;
}

.top-right {
  border-top-right-radius: 16px;
}

.bottom-right {
  border-bottom-right-radius: 16px;
}

.bottom-left {
  border-bottom-left-radius: 16px;
}

/* 简写：左上 右上 右下 左下 */
.custom {
  border-radius: 16px 8px 16px 8px;
}

/* 对角相同 */
.diagonal {
  border-radius: 16px 8px;
}

椭圆圆角

/* 水平半径 / 垂直半径 */
.ellipse {
  border-radius: 50% / 25%;
}

/* 单角椭圆 */
.ellipse-corner {
  border-top-left-radius: 100px 50px;
}

/* 复杂形状 */
.blob {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

圆形与胶囊

/* 正圆（需要等宽高） */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* 胶囊（任意宽高） */
.pill {
  padding: 8px 24px;
  border-radius: 9999px;
}

阴影

box-shadow 基础

/* x偏移 y偏移 模糊 颜色 */
.shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* x偏移 y偏移 模糊 扩散 颜色 */
.shadow-spread {
  box-shadow: 0 4px 6px 2px rgba(0, 0, 0, 0.1);
}

阴影层级系统

.shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shadow {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06);
}

.shadow-md {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
  box-shadow:
    0 10px 15px rgba(0, 0, 0, 0.1),
    0 4px 6px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
  box-shadow:
    0 20px 25px rgba(0, 0, 0, 0.1),
    0 10px 10px rgba(0, 0, 0, 0.04);
}

.shadow-2xl {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

内阴影

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

/* 内凹效果 */
.pressed {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.15),
    inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}

多层阴影

/* 更自然的阴影 */
.natural-shadow {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 2px 2px rgba(0, 0, 0, 0.08),
    0 4px 4px rgba(0, 0, 0, 0.08),
    0 8px 8px rgba(0, 0, 0, 0.08);
}

/* 彩色光晕 */
.glow {
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.3),
    0 0 40px rgba(59, 130, 246, 0.2),
    0 0 60px rgba(59, 130, 246, 0.1);
}

彩色阴影

.colored-shadow {
  background: #3b82f6;
  box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
}

/* 悬停增强 */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

outline 轮廓

轮廓不占用布局空间，常用于焦点状态：

.outline-basic {
  outline: 2px solid #3b82f6;
}

/* outline 属性 */
.outline-full {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #3b82f6;
  outline-offset: 2px; /* 轮廓偏移 */
}

/* 焦点环 */
button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* 移除默认轮廓（需提供替代方案） */
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

outline vs border

/* outline 不影响布局 */
.no-shift {
  outline: 2px solid blue;
  /* 元素不会移动 */
}

/* border 影响布局 */
.will-shift {
  border: 2px solid blue;
  /* 元素会增大 4px */
}

border-image 渐变边框

基本用法

.gradient-border {
  border: 4px solid;
  border-image: linear-gradient(135deg, #3b82f6, #8b5cf6) 1;
}

border-image 属性

.border-image-full {
  border-width: 4px;
  border-style: solid;
  border-image-source: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-image-slice: 1;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch;
}

渐变边框 + 圆角

border-image 不支持圆角，需要用其他方法：

/* 方法1：伪元素 */
.gradient-border-rounded {
  position: relative;
  background: white;
  border-radius: 12px;
}

.gradient-border-rounded::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  z-index: -1;
}

/* 方法2：背景裁剪 */
.gradient-border-bg {
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #3b82f6, #8b5cf6) border-box;
  border: 2px solid transparent;
  border-radius: 12px;
}

实战案例

卡片悬停效果

.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card:hover {
  border-color: #3b82f6;
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
  transform: translateY(-4px);
}

输入框焦点

.input {
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease;
}

.input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.input:invalid:not(:placeholder-shown) {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

头像边框

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 渐变边框头像 */
.avatar-gradient {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #3b82f6, #ec4899);
}

.avatar-gradient img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

按钮样式

/* 实心按钮 */
.btn-solid {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* 边框按钮 */
.btn-outline {
  background: transparent;
  color: #3b82f6;
  border: 2px solid #3b82f6;
  padding: 10px 22px;
  border-radius: 8px;
}

.btn-outline:hover {
  background: #3b82f6;
  color: white;
}

/* 渐变边框按钮 */
.btn-gradient-border {
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #3b82f6, #8b5cf6) border-box;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px 22px;
  color: #3b82f6;
}

分隔线

.divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 24px 0;
}

/* 渐变分隔线 */
.divider-gradient {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb 50%, transparent);
}

/* 带文字分隔线 */
.divider-text {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #9ca3af;
}

.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

新拟态效果

.neumorphism {
  background: #e0e5ec;
  border-radius: 16px;
  padding: 24px;
  box-shadow:
    8px 8px 16px #b8bec7,
    -8px -8px 16px #ffffff;
}

/* 凹陷效果 */
.neumorphism-inset {
  background: #e0e5ec;
  border-radius: 16px;
  padding: 24px;
  box-shadow:
    inset 4px 4px 8px #b8bec7,
    inset -4px -4px 8px #ffffff;
}

标签页指示器

.tab {
  padding: 12px 24px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
}

.tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}

/* 动画指示器 */
.tabs {
  position: relative;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #3b82f6;
  transition: all 0.3s ease;
}

性能优化

/* box-shadow 动画性能较差 */
.avoid {
  transition: box-shadow 0.3s;
}

/* 使用伪元素优化 */
.optimized {
  position: relative;
}

.optimized::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s;
}

.optimized:hover::after {
  opacity: 1;
}

常见问题

🤔 border-radius 超过 50% 会怎样？

超过 50% 和 50% 效果相同，浏览器会自动裁剪。

🤔 如何实现单边阴影？

使用负的扩散值和偏移：

.shadow-bottom {
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1);
}

🤔 outline 和 border 选哪个？

焦点状态用 outline（不影响布局）
装饰性边框用 border

边框和阴影是构建视觉层次的基础工具。从简单的边框到复杂的渐变效果，从微妙的阴影到新��态设计，这些属性的组合能创造出丰富的视觉效果。下一篇我们将学习 CSS 逻辑属性。