box-shadow

CSS3 box-shadow 不仅仅只有

  • 【投影方式:外阴影或内阴影】

  • 【X轴偏移量:x-offset】

  • 【Y轴偏移量:y-offset】

  • 【阴影模糊半径:blur-radius】

  • 【阴影颜色:color】

它还有一个常被我们遗忘的另外一个值——【阴影扩展半径:spread-radius】。

我们可以通过【spread-radius扩展半径】来控制阴影的扩展方向:扩展半径有两个值,如果取值为正值,则个阴影会向外扩展,如果你给其取负值,整个阴影向内缩小。如此可以通个这个值配合阴影的模糊半径来制作单边的不同阴影效果,而且不会影响其他边的效果。或者换句简单的点,可以使用他制作单边投影效果。

参考资料

最后更新于