阴影 box-shadow

阴影实验网站

Box Shadow CSS Generator

规则

box-shadow: 朝右偏移 朝下偏移 模糊度 扩展半径 阴影色 外/内阴影；;

可以想象背后有一层同样大小的黑影

参数

• 朝右/朝下偏移

  • 单位：px
  • 意义：相当于把黑影移动的像素值
  • 例子：
    • 5px 5px <==> 右下
    • 5px -5px <==> 右上
    • -5px 5px <==> 左下
    • -5px -5px <==> 左上
    • 5px 0px <==> 右
    • 0px 5px <==> 下
    • -5px 0px <==> 左
    • 0px -5px <==> 上

• 模糊度/扩展半径

  • 一般取0px就行

• 外/内阴影

  • 默认不写就是外阴影，可写inset表示内阴影

例子

box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.12);

兼容性前缀

box-shadow:
-webkit-box-shadow:
-moz-box-shadow:
-o-box-shadow: