盒阴影与轮廓的使用

盒阴影与轮廓是CSS中两个强大的视觉样式属性，能够为元素添加深度、层次感和交互反馈。盒阴影通过模拟光线投射效果创造立体感，而轮廓则常用于突出焦点元素。两者虽然视觉效果相似，但应用场景和底层机制存在显著差异。

盒阴影基础语法

box-shadow属性的完整语法包含六个参数：

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

实际使用时最少只需指定前两个参数：

.box {
  box-shadow: 5px 5px; /* 右下方向阴影 */
}

添加模糊效果和颜色：

.box {
  box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* 底部柔和阴影 */
}

高级盒阴影技巧

多重阴影

通过逗号分隔实现多层阴影：

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

内阴影

使用inset关键字创建凹陷效果：

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

霓虹灯效果

结合模糊半径和扩展半径：

.neon {
  box-shadow: 
    0 0 5px #0ff,
    0 0 15px #0ff,
    0 0 30px #0ff;
}

轮廓属性详解

outline是围绕元素边框外绘制的线条，基本语法：

outline: [宽度] [样式] [颜色];

典型应用场景：

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

轮廓与边框的区别

1. 布局影响：轮廓不占据空间，不影响文档流
2. 绘制顺序：轮廓始终绘制在边框外侧
3. 圆角适配：轮廓不跟随border-radius

对比示例：

<div class="box border">边框影响布局</div>
<div class="box outline">轮廓不影响布局</div>

<style>
.box {
  width: 100px;
  height: 100px;
  margin: 20px;
}
.border {
  border: 10px solid red;
}
.outline {
  outline: 10px solid blue;
}
</style>

实战应用案例

浮动卡片设计

.card {
  width: 300px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: box-shadow 0.3s;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

可访问性焦点样式

button {
  outline: none;
}

button:focus {
  outline: 2px dashed #E91E63;
  outline-offset: 3px;
}

图像悬停效果

.gallery img {
  transition: box-shadow 0.5s;
}

.gallery img:hover {
  box-shadow: 
    0 0 0 5px white,
    0 0 0 10px #FF5722;
}

性能优化建议

1. 避免在动画中频繁改变盒阴影
2. 使用will-change: box-shadow预提示浏览器
3. 简单阴影性能优于多层复杂阴影
4. 考虑使用filter: drop-shadow()替代某些场景

浏览器兼容方案

针对旧版浏览器的前缀处理：

.shadow {
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

创意效果实现

伪3D按钮

.button-3d {
  box-shadow: 
    0 4px 0 #bbb,
    0 5px 0 #999,
    0 6px 0 #777;
  transform: translateY(-6px);
  transition: all 0.1s;
}

.button-3d:active {
  transform: translateY(0);
  box-shadow: none;
}

浮动导航栏

nav {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  background: white;
}

图片相框效果

.photo-frame {
  padding: 10px;
  background: white;
  box-shadow: 
    0 0 0 5px #333,
    0 0 0 10px #555,
    0 0 0 15px #777;
}