用box-shadow取代border

Posted on Edited on In

要製作出按鈕的「下底線」，除了用border-bottom之外，這裡要提供另一種方式：使用box-shadow

使用box-shadow做出下底線

可看此範例中，兩種方式都可以做出下底線

  • 使用box-shadow

css:

1
2
3
.box-shadow-1{
	box-shadow: 0 4px purple;
}
  • 使用border-bottom

css:

1
2
3
.border-bottom-1{
	border-bottom: 4px solid purple;
}

長這樣：

那麼，box-shadow 跟 border 有什麼差別呢？

box-shadow 跟 border 最大的不同就是：box-shadow不佔實體空間

如果是用在按鈕、表單上，box-shadow 可以避免影響到其他物件的位置

以下提供一個範例：

css:

1
2
3
4
5
6
.box-shadow-2{
	box-shadow: 0 0 0 15px rgb(0,214,214);
}
.border-2{
	border: 15px solid rgb(0,214,214);
}

對照圖片：

那麼，往後在寫border的時候會建議都修改成box-shadow嗎？

這段要看需求，兩者可以並存，可以依據設計去做調整，很常見的是按鈕有固定的實線用 border，然後靠 box-shadow 來點綴提升質感