CSS3|box-shadow 陰影效果 -外陰影、內陰影

CSS3 box-shadow是能夠製作陰影效果的屬性

簡單說明屬性中的值依序為:X軸、Y軸、模糊值、顏色

box-shadow: 1px 1px 5px gray;

box-shadow 陰影

這邊我們來練習幾個陰影的範例

  1. 右下外側陰影效果
  2. 外陰影效果
  3. 擴大陰影效果
  4. 內陰影效果
  5. 三邊陰影效果

HTML

<body>
	<div class="box1">右下外側陰影效果</div>
	<div class="box2">外陰影效果</div>
	<div class="box3">擴大陰影效果</div>
	<div class="box4">內陰影效果</div>
	<div class="box5">三邊陰影效果</div>
</body>

CSS 陰影設定

右下外側陰影效果

box-shadow 陰影
.box1{
  width: 200px;
  height: 200px;
  background: #E3B5A4;
  box-shadow: 5px 5px 15px gray;
  line-height: 200px;
  text-align: center;
  color: #fff;
}

外陰影效果

box-shadow 陰影
.box2{
  width: 200px;
  height: 200px;
  background: #E3B5A4;
  box-shadow:  0 0 10px gray;
  text-align: center;
  color: #fff;
 }

擴大陰影效果

box-shadow 陰影
box-shadow 陰影
.box3{
  width: 200px;
  height: 200px;
  background: #E3B5A4;
  box-shadow: 0px 0px 15px 10px gray;
  text-align: center;
  color: #fff;
}

內陰影效果

box-shadow 內陰影
box-shadow 內陰影
.box4{
  width: 200px;
  height: 200px;
  background: #E3B5A4;
  box-shadow: inset 3px 3px 15px gray;
  text-align: center;
  color: #fff;
}

三邊陰影效果

box-shadow 陰影
.box5{
  width: 200px;
  height: 200px;
  background: #E3B5A4;
  box-shadow: inset 0 2px 0px 1px gray;
  text-align: center;
  color: #fff;
}

陰影的內外陰影預設為「外」,模糊預設為0,顏色預設為黑色,也可接受負數,則會往上或往左。

有了這個CSS3 裡的box-shadow 功能,就可以很輕鬆的在程式中直接設定陰影,不用再利用圖片來做了。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *