CSS高级属性之 box-shadow 详解

1.1 概述

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

作用:

• 营造层次感(立体感)
• 充当没有宽度的边框
• 特殊效果

含义: 设置或检索对象阴影

• none： 无阴影
• length ①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
• length ②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
• length ③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
• length ④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
• color： 设置对象的阴影的颜色。
• inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影。

语法:

• box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

1.2 浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本

1.3 示例：扔到桌子上面的图片

body {
  margin: 30px;
  background-color: #E9E9E9;
}
div.polaroid {
  width: 284px;
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  background-color: white;
  /* Add box-shadow */
  box-shadow: 2px 2px 3px #aaaaaa;
}
div.rotate_left {
  float: left;
  -ms-transform: rotate(7deg); /* IE 9 */
  -moz-transform: rotate(7deg); /* Firefox */
  -webkit-transform: rotate(7deg); /* Safari and Chrome */
  -o-transform: rotate(7deg); /* Opera */
  transform: rotate(7deg);
}
div.rotate_right {
  float: left;
  -ms-transform: rotate(-8deg); /* IE 9 */
  -moz-transform: rotate(-8deg); /* Firefox */
  -webkit-transform: rotate(-8deg); /* Safari and Chrome */
  -o-transform: rotate(-8deg); /* Opera */
  transform: rotate(-8deg);
}

<div class="polaroid rotate_left">
  <img src="../assets/images/ballade_dream.jpeg" alt="郁金香" width="284" height="213"/>
  <p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
</div>

<div class="polaroid rotate_right">
  <img src="../assets/images/longlong.jpeg" alt="朱一龙" width="284" height="213"/>
  <p class="caption">朱一龙，中国内地男演员、歌手。</p>
</div>