CSS3 box-shadow 陰影應用

Web Design 網頁設計中採用 CSS box-shadow 陰影應用可以讓指定的 Html 元素產生陰影效果,讓區塊在網頁中浮現、凸顯或者產生立體感在設計中增加深度感,使其在網頁中更加突出。使用 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 區塊陰影並加上文字陰影效果,產生文字凹陷使用負值。


shadow

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

CSS 的浮雕陰影效果可以讓 HTML 元素刻上了凹凸不平的紋理,看起來像是浮出來具有立體感的效果。將元素的表面刻上了凹凸不平的紋理,然後產生的陰影和高光來模擬出立體效果,通常使用 box-sizing:border-box 屬性來控制邊框的尺寸問題。使用兩層區塊用來表達陰影,內層呈現高光效果,此時需要帶有底色才能襯托出來。早期在不同的瀏覽器和設備上,情況下可能會出現視覺上的不一致性,但當前主流瀏覽器都支持,設計時需要進行測試和調整。

A
B

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);}


使用陰影替代 border 邊框

使用 CSS box-shadow 陰影替代 border 邊線可以調整陰影的大小、顏色、透明度和位置,來達到想要的效果,使用 CSS box-shadow 來取代傳統的邊線,讓網頁邊框設計多一種處理方式,主要差異是版面的位置影響。

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 應用

CSS 的 box-shadow 屬性可以用在網頁設計 HTML 元素周圍創建陰影效果,而 jQuery 可以進一步應用這個屬性,讓生成的元素具有更加豐富的視覺效果。可以通過 jQuery 對按鈕添加 hover 或 click 事件來改變陰影的顏色或偏移量,使按鈕的應答更加自然,或是彈出式的提示框,使畫面更加生動。

$("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);


CSS border-radius 圓角屬性應用

CSS 的 border-radius 屬性用於設置元素的邊框圓角。使用這個屬性可以讓元素的邊框呈現圓角效果,從而使元素看起來更加柔和和美觀。通過將圖片元素的 border-radius 屬性設置為 50% 或與圖片的寬度和高度相等的值,就可以輕鬆地將圖片變成圓形。在設計中使用文本、圖像或其他內容添加 border: 1px solid #ccc 邊框。圓角同樣的可以通過將元素的 border-radius 屬性設置為適當的值來實現這個效果。

四個邊分開設置的值

border-radius:1px 2px 3px 4px;

圓角效果使用四個邊分開設置,順序為左上、右上、右下、左下這樣就可以創造出希望的圓角效果。