www.cftea.com

有趣的 CSS 3-阴影与发光

千一网络(原创)2016/11/12 8:25:02

如上代码,关键是 box-shadow 属性,效果如下:

box-shadow

box-shadow 可以写六个值,其中前两个值是必写,其他全部是可选。

  • h-shadow:相对于元素来说,水平阴影的位置。允许负值。
  • v-shadow:相对于元素来说,垂直阴影的位置。允许负值。
  • blur:模糊量。
  • spread:扩展量。用过 Photoshop 的,都很熟悉这几个属性。
  • color:阴影的颜色。
  • inset:将外部阴影 (outset) 改为内部阴影,省略表示外部阴影。

以上属性都是指阴影的,但是通过巧妙的配合(如本页代码),可以实现发光效果。

<<返回首页<<