CSS shadow 陰影

區塊 box-shadow

外陰影
box-shadow: X Y 深度 顏色();
用於區塊與圖片陰影。

.button{
     -moz-box-shadow:0px 0px 8px rgba(20%,20%,40%,0.8);
     -webkit-box-shadow:0px 0px 8px rgba(20%,20%,40%,0.8);
     box-shadow:0px 0px 8px rgba(20%,20%,40%,0.8);
 }

內陰影
box-shadow:inset offset-x offset-y blur-radius spread-radius 顏色();

.button{
     box-shadow:inset 3px 3px 12px gold;
 }

文字 text-shadow

text-shadow: X Y 深度 顏色();

<font style="text-shadow:2px 2px 2px #000000;">文字陰影效果</font>

多層陰影應用

text-shadow: X Y 深度 顏色(),X Y 深度 顏色() ;

/*雙層陰影*/
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
/*多層陰影*/
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
/*文字＋線框*/
h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

立體效果陰影

#boxshadow {
  position: relative;
  -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
  -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  padding: 10px;
  background: white;
}

/* Make the image fit the box */
#boxshadow img {
  width: 100%;
  border: 1px solid #8a4419;
  border-style: inset;
}

#boxshadow::after {
  content: '';
  position: absolute;
  z-index: -1; /* hide shadow behind image */
  -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);        
  width: 70%; 
  left: 15%; /* one half of the remaining 30% */
  height: 100px;
  bottom: 0;
}

<div id="boxshadow">
  <img src="xxxx.jpg" alt="Norway" width="600" height="400">
</div>