css如何設置橫線的陰影

# CSS如何設置橫線的陰影

在網頁設計中，橫線（`<hr>`元素或邊框線）常用于內容分隔。通過CSS陰影效果可以增強其視覺層次感。本文將詳細介紹5種實現橫線陰影的方法，并附代碼示例。

## 一、使用box-shadow屬性

`box-shadow`是最直接的陰影實現方式，適用于`<hr>`或`div`元素：

```css
.shadow-hr {
  border: none;
  height: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

參數說明： - 0：水平偏移（本例無偏移） - 2px：垂直偏移（向下投影） - 4px：模糊半徑 - rgba(0,0,0,0.2)：半透明黑色陰影

二、多重陰影實現立體效果

通過疊加多層陰影創造更復雜的視覺效果：

.multi-shadow {
  border: none;
  height: 3px;
  box-shadow: 
    0 1px 0 #fff,
    0 2px 2px rgba(0,0,0,0.3),
    0 4px 4px rgba(0,0,0,0.1);
}

三、偽元素實現漸變陰影

利用::before/after偽元素制作漸變消失的陰影：

.fade-shadow {
  position: relative;
  border: none;
  height: 1px;
  background: #ddd;
}

.fade-shadow::after {
  content: "";
  position: absolute;
  width: 80%;
  height: 2px;
  bottom: -5px;
  left: 10%;
  background: linear-gradient(to right, 
    transparent, 
    rgba(0,0,0,0.3), 
    transparent);
}

四、text-shadow的特殊應用

雖然text-shadow本用于文字，但可通過特殊字符實現橫線陰影：

<div class="text-shadow-line">――――</div>

.text-shadow-line {
  text-align: center;
  color: transparent;
  text-shadow: 0 2px 3px rgba(0,0,0,0.4);
  font-size: 24px;
}

五、SVG陰影方案

使用SVG繪制帶陰影的線條，適合需要復雜效果的情況：

<svg width="100%" height="10">
  <line x1="0" y1="5" x2="100%" y2="5" 
        stroke="#333" 
        stroke-width="1"
        filter="url(#shadow)"/>
  <filter id="shadow">
    <feDropShadow dx="0" dy="2" 
                 stdDeviation="2" 
                 flood-opacity="0.3"/>
  </filter>
</svg>

六、陰影效果調優技巧

1. 顏色選擇：使用rgba()控制陰影透明度

   box-shadow: 0 2px 4px rgba(100,120,200,0.3);
   

2. 模糊度控制：較大的模糊值創建柔和陰影

   box-shadow: 0 5px 15px rgba(0,0,0,0.1);
   

3. 內陰影效果：

   .inset-shadow {
    border: none;
    height: 10px;
    box-shadow: inset 0 5px 5px -5px #000;
   }
   

七、瀏覽器兼容性注意事項

對于老舊瀏覽器，可使用以下回退方案：

.fallback-line {
  border: 0;
  height: 1px;
  background: #ccc; /* 無陰影時的默認樣式 */
  box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

八、實際應用案例

卡片分隔線示例：

.card-divider {
  border: none;
  height: 1px;
  margin: 20px 0;
  background-image: linear-gradient(
    to right, 
    transparent, 
    #e0e0e0, 
    transparent
  );
  box-shadow: 0 1px 1px white;
}

懸浮陰影效果：

.hover-shadow-line {
  transition: box-shadow 0.3s ease;
}
.hover-shadow-line:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

通過組合這些技術，可以創建出從簡約到華麗的各類橫線陰影效果。建議根據實際設計需求選擇最適合的實現方案。 “`