CSS_box-shadow用法

Posted on Edited on In

利用「box-shadow」可以做出各種陰影效果

教學網址：
https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

我的codepen練習：
https://codepen.io/saffranwang/pen/JVNYNY

CSS Syntax

box-shadow: none --> No shadow is displayed

(畫黃色底為必填)
box-shadow: x軸位移 y軸位移 blur spread color |inset|

html語法：

1
<div class="box"></div>

[說明]

x軸位移

  • 必填
  • 正值：陰影在元素的右側
  • 負值：陰影在元素的左側

y軸位移

  • 必填
  • 正值：陰影在元素的下方
  • 負值：陰影在元素的上方

⭐️ css語法：

1
2
3
4
5
6
.box{
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  box-shadow: 10px 30px;
}

blur

  • 非必填
  • 數值越高，陰影越模糊

⭐️ css語法：

1
2
3
4
5
6
.box{
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  box-shadow: 10px 30px 7px;
}

spread

  • 非必填
  • 正值：陰影擴散
  • 負值：陰影縮小

⭐️ css語法：

1
2
3
4
5
6
.box{
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  box-shadow: 10px 30px 7px 15px;
}

color

  • 非必填
  • 沒有設定color的話，陰影預設會是「文字的顏色」
  • 注意：在Safari (on PC)，color為必填，否則陰影不會顯示出來

⭐️ css語法：

1
2
3
4
5
6
.box{
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  box-shadow: 10px 30px 7px 15px purple;
}

inset

  • 非必填
  • 沒有設定inset的話，預設會是「陰影在外」
  • ❗️ 設定inset：陰影會在內 ❗️

⭐️ css語法：

1
2
3
4
5
6
.box{
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  box-shadow: 10px 30px 7px 15px purple inset;
}

加入多個陰影

想加入多個陰影，將多個陰影使用「逗號」隔開

html語法：

1
<div class="box"></div>

css語法：

1
2
3
4
5
6
.box{
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  box-shadow: 5px 5px red, 10px 10px blue, 15px 15px orange;
}

多個陰影＋blur效果

css語法：

1
2
3
4
5
6
.box{
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  box-shadow: 5px 5px 8px red, 10px 10px 8px blue, 15px 15px 8px orange;
}

四邊都有陰影

如何在input加上「四邊都有的內陰影」？

html語法：

1
2
3
<form action="">
  <input type="text">
</form>

css語法：

1
2
3
4
5
6
7
input{
  width: 200px;
  height: 30px;
  border: 2px solid #000;
/*  四邊都要有陰影，且陰影在內  */
  box-shadow: 0px 0px 15px orange inset;
}

要讓四邊都有陰影，只要：

  • 把「x軸位移、y軸位移」都設為0px
  • 使用blur數值（也可以再加上spread）讓陰影出現

就可以了！