盒阴影与轮廓的使用

盒阴影与轮廓是CSS中两个强大的视觉样式工具，能够为元素添加深度、层次感和交互反馈。盒阴影通过模拟光线投射效果创造立体感，而轮廓则常用于突出焦点元素，尤其在表单交互中。两者虽然视觉效果相似，但应用场景和实现方式截然不同。

盒阴影的基本语法

box-shadow属性允许开发者为元素添加一个或多个阴影效果。其完整语法包含六个参数：

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩散半径] [颜色] [inset];

实际使用时可以只指定前两个必要参数：

.card {
  box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}

这个例子创建了一个向右下方偏移3像素、模糊半径5像素的灰色阴影。模糊半径越大，阴影边缘越柔和；扩散半径控制阴影的放大缩小；inset关键字将阴影改为内阴影。

多重阴影的高级应用

通过逗号分隔可以叠加多个阴影效果：

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

这种技术常用于创建"浮动"效果：

.floating-button {
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
  transition: box-shadow 0.3s;
}

.floating-button:hover {
  box-shadow: 
    0 10px 20px rgba(0,0,0,0.19),
    0 6px 6px rgba(0,0,0,0.23);
}

内阴影的特殊用途

inset关键字创建的内部阴影适合模拟凹陷效果：

.inset-panel {
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
  background: #f0f0f0;
  padding: 20px;
}

结合渐变背景可以创造更复杂的视觉效果：

.glass-effect {
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
  box-shadow: 
    inset 0 0 10px rgba(255,255,255,0.8),
    0 0 20px rgba(0,0,0,0.3);
}

轮廓的基础特性

outline属性在元素周围绘制一条线，不占用布局空间：

input:focus {
  outline: 2px solid #4CAF50;
}

与边框不同，轮廓具有以下特点：

• 始终绘制在边框外侧
• 不影响盒模型计算
• 可以是非矩形（跟随border-radius）

轮廓偏移的实用技巧

outline-offset属性控制轮廓与元素边框的距离：

.image-thumbnail {
  outline: 2px dashed #3498db;
  outline-offset: -10px;
  border: 5px solid #fff;
}

负值使轮廓向内偏移，正值则向外扩展。这在创建特殊选择状态时非常有用：

.grid-item:focus {
  outline: 3px solid #f39c12;
  outline-offset: 5px;
}

盒阴影与轮廓的性能考量

虽然两者都是纯CSS实现，但性能特征不同：

• 盒阴影会触发重绘，特别是在动画中
• 轮廓通常性能开销更小
• 多重阴影叠加会显著增加渲染负担

优化建议：

/* 避免这种性能密集型阴影 */
.performance-heavy {
  box-shadow: 
    0 0 20px #fff,
    0 0 30px #f0f,
    0 0 40px #0ff;
}

/* 改用伪元素实现复杂效果 */
.optimized-effect::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 50px rgba(0,255,255,0.5);
}

响应式设计的适配方案

针对不同设备调整阴影强度：

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

@media (min-width: 768px) {
  .card {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
}

对于高对比度模式下的适配：

@media (prefers-contrast: more) {
  button:focus {
    outline: 3px solid transparent;
    box-shadow: 0 0 0 3px #000;
  }
}

创造性的混合应用

结合两种属性可以实现独特效果：

.neon-text {
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de;
  outline: 1px solid #fff;
  outline-offset: 3px;
}

.custom-checkbox:checked {
  box-shadow: inset 0 0 0 3px #fff;
  outline: 2px solid #2ecc71;
}

可访问性最佳实践

确保视觉提示不影响操作：

• 焦点轮廓不可随意移除
• 阴影对比度要符合WCAG标准
• 提供替代的焦点指示方式

button {
  position: relative;
}

button:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

button::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid transparent;
  border-radius: inherit;
}

button:focus-visible::after {
  border-color: currentColor;
}