CSS3 box-shadow 陰影應用

使用 CSS box-shadow 製作 DIV 區塊陰影效果應用範例。

box-shadow: h-shadow v-shadow blur spread color inset;

CSS3 box-shadow 向區塊添加一個或多個陰影。屬性可以是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。

h-shadow 水平陰影的位置、用來設置陰影偏移量，允許負值《必需》

v-shadow 垂直陰影的位置、用來設置陰影偏移量，允許負值《必需》

blur 模糊距離、值越大，模糊面積越大《可選》

spread 正值時陰影擴張、負值時陰影收縮，預設為 0 陰影與元素同樣大《可選》

color 陰影的顏色《可選》

inset 將外部陰影 outset 改為內部陰影《可選》

https://developer.mozilla.org/zh-TW/docs/Web/CSS/box-shadow

加上文字陰影效果

兩層 DIV 區塊陰影並加上文字陰影效果，產生文字凹陷使用負值。

HTML

<div class="shadow-inset"><div><b>shadow</b></div></div>

CSS

div.shadow-inset{margin:30px 0;}
/* 區塊基本樣式 */
div.shadow-inset div{margin:0px 10%;width:80%;height:200px;background-color:#cd5c5c;
border:3px solid #cd5c5c;border-radius:9px;text-align:center;}
/* 區塊添加陰影 */
div.shadow-inset div{box-shadow: 0px 0px 12px rgba(0,0,0,0.5),
inset 6px 6px 32px rgba(255,255,255,0.1),
inset 0px 0px 8px rgba(255,255,255,0.5),
inset -5px -5px 12px rgba(0,0,0,0.25);}
/* 文字陰影 */
div.shadow-inset div b{font-family:Roboto,Arial,sans-serif;font-size:72px;
line-height:200px;letter-spacing:-2px;color:#f0f0f0;
text-shadow: -1px -1px 5px rgba(0,0,0,0.35);}

浮雕陰影 Embossed shadow

使用兩層區塊一個用來表達陰影，內層呈現高光效果，此時需要帶有底色才能襯托出來。

HTML

<div class="embossed-shadow">
  <div class="black-shadow">
    <div class="white-emboss">A</div>
  </div>
  <div class="black-shadow">
    <div class="white-emboss">B</div>
  </div>
</div>

CSS

div.embossed-shadow{margin:30px 0px;padding:20px 0px;background-color:#e9ecef;max-width:900px;}
div.embossed-shadow div{margin:30px auto;width:120px;height:120px;
background-color:#e9ecef;border-radius:30%;}
/* 區塊陰影及高光效果 */
div.embossed-shadow div.black-shadow{box-shadow: 6px 6px 16px rgba(0,0,0,0.3);}
div.embossed-shadow div.white-emboss{box-shadow: -6px -6px 16px rgba(255,255,255,1);}
/* 文字陰影 */
div.embossed-shadow div div{font-size:48px;text-align:center;
line-height:120px;text-shadow: 2px 2px rgba(255,255,255,0.75);}

使用陰影替代邊線

HTML

<div class="grow"></div>

CSS

div.grow{width:200px;height:100px;background-color:#9acd32;}

製作一個黃綠色的方塊，blur 模糊距離為 0 由擴張、位置來改變方向。與 border 邊框主要差異是影響版面位置，邊框佔有空間、陰影則忽略空間超出的部份可能不見或穿越，視情況使用。

由下左右擴張

box-shadow:0px 30px 0px 30px #6b8e23;

由中心四面擴張

box-shadow: 0px 0px 0px 30px #6b8e23;

由下擴張

box-shadow: 0px 60px 0px 0px #6b8e23;

由右擴張

box-shadow: 150px 0px 0px 0px #6b8e23;

由左右擴張

box-shadow: 60px 0px 0px #6b8e23, -60px 0px 0px #6b8e23;

由上下擴張

box-shadow: 0px 30px 0px #6b8e23, 0px -30px 0px #6b8e23;

jQuery box-shadow 應用

$("div.jquery-shadow div").css({
  "box-shadow": n1 + "px " + n1 + "px " + n2 + "px " + n3 + "px rgba(0,0,0,0.5)"
});

box-shadow: 2px 2px 15px 0 rgba(0,0,0,0.5);