玩转css3盒阴影和文本阴影

在开发中经常会使用阴影增加现实感,css3实现的模糊阴影主要分为盒阴影box-shadow和文本阴影text-shadow。今天就带大家玩转css的阴影,后面的拓展也只是抛砖引玉,希望给各位带来启迪。

paste image

一、box-shadow

该属性用来给容器添加一个或多个阴影效果。这个属性非常有用,可以结合伪类和动画实现设计的层次感和高亮度。基本语法是:

1
box-shadow: [inset] x-offset y-offset [blur] [spread] [color];

属性说明:

  • inset:【可选】将默认的外阴影设置为内阴影。
  • x-offset:【必需】水平方向阴影偏移量,可为负值。
  • y-offset:【必需】垂直方向上阴影偏移量,可为负值。
  • blur:【可选 】阴影模糊半径,不可为负值。
  • spread:【可选】阴影延展半径,可为负值。
  • color:【可选】阴影颜色。

box-shadow阴影偏移量可正可负,为正值时则向右或下偏移。

paste image

box-shadow可设置多个阴影,中间用逗号“,”分隔;比如可同时设置内外影响,例如:

paste image

拓展:多个阴影巧妙结合,可以创造出很多意想不到的效果。

四色边框:

paste image

双重边框:

paste image

更多示例请自行创造。

二、text-shadow

通过css3的文本阴影属性可以用编程方式创建文本阴影。阴影可以创造出各式各样的效果,不过通常是高亮文本、给文本深度和使得文本突出显示。
语法是:

1
text-shadow: x-offset y-offset blur color;

属性说明:

  • x-offset:【必需】水平方向阴影偏移量,可为负值。
  • y-offset:【必需】垂直方向上阴影偏移量,可为负值。
  • blur:【可选 】阴影模糊半径,不可为负值。
  • color:【可选】阴影颜色。

paste image

更多效果等你亲自体验…

三、总结

阴影在网页开发中十分常见,巧妙使用阴影,可以为你的网页增色不少。

竹风原创,转发请注明原文链接,谢谢。

最后更新:

原始链接: http://wangzc.cc/blog/css-box-shadow/