iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
1
Modern Web

CSS Secrets 導讀系列 第 4

Secret 2: 多重邊界

在 Backgrounds & Border Level 3 當時還在草稿階段時,WG的成員有討論過多重邊界的可能性,就像現在 background 可以設很多個一樣。但是這個提案當時的成員認為用處不大,因此最終沒有成為標準。

現在開發者們要實現多重邊界,最常用 box-shadow

box-shadow 本身有5個屬性,第4個屬性比較少用到,叫做 spread radius,用來指定陰影的寬度。在其它值(offset, spread, blur) 都是0的狀況下,完全不透明的陰影看起來就像是邊界。

box-shadow 同時可以設多個,後面設的陰影會顯示在下面,所以我們可以利用這個特性製造多重邊界的效果,只是要注意在下方的 box-shadow它的 spread radius 值要是上方陰影的總合加上自己的寬度。

用這個方法要注意的地方是,陰影是沒有實體的,所以它不被算在 width & height 之內,當然也就無法觸發滑鼠事件例如 hover 或 click。


上一篇
Secret 1: 半透明的邊界
下一篇
Secret 3: 靈活的背景定位
系列文
CSS Secrets 導讀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言