CSS-Box-shadow

[yaofly2012]

一、介绍

1.1 语法

详细见MDN。

/* 完整语法 */ 
box-shadow: [insert] x-offset y-offset [blur-radius] [spead-radis] [color];

/* 关键字`none` */ 
box-shadow: none;

1. 可以同时应用多个box-shadow值；
2. 只有 x/y offset是必须的，其他都可选；
3. color的默认值是currentcolor变量的值。

x/y offset（偏移量）

可以视为box-shadow也是个矩形区域，并且和元素矩形区域一致。默认情况下位置也一致（左上角对齐）。
通过 x/y offset可以控制box-shadow矩形区域的偏移量。

blur-radius（模糊半径）

值越大越阴影越模糊，不可以为负值。

如何实现“模糊”效果？
利用的渐变实现模糊的。

对于长而直的阴影边缘，它会创建一个过渡颜色用于模糊 以阴影边缘为中心、模糊半径为半径的局域，过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。

阴影边缘就是阴影矩形的边，并且受spead-radius影响。

spead-radius（延伸半径）

控制box-shadow矩形区域延伸长度大小，可以为负值。可用于实现box-shadow矩形区域缩放。
注意：box-shadow矩形区域4个方向同时延伸的，不能指定单个方向延伸。

1.2 blur-radius PK spead-radius

第一次看到这两个属性有点疑惑，不过它俩是不同的概念，也不存在可比性，只是容易混淆而已。

二、指定border阴影

利用x/y-offset+spead-radius模拟。这样实现的缺点是四个角没有阴影效果。

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}

.all {
  box-shadow: 0 0 5px #333;
}

参考

1. MDN box-shadow
2. CSS3 Box Shadow, only top/right/bottom/left and all
3. What is the difference between Spread and Blur radius properties?
4. CSS box-shadow: What is the difference between blur and spread?
5. Experiment with css box shadow