css实现立体感按钮

css实现立体感按钮

*/ -->

css实现立体感按钮

Table of Contents

• 1 background深色+按钮浅色 = 斜上有阳光照下，出现阴影的感觉。
  • 1.1 条件
  • 1.2 方法
  • 1.3 结果
• 2 直接用图片，把第一种方法用图片保存下来，直接background-image。

1 background深色+按钮浅色 = 斜上有阳光照下，出现阴影的感觉。

1.1 条件

外围一层div = bgshadow 内里一层div = nav

1.2 方法

bgshadow设background-color属性，颜色比nav的background-color更深，高度更高一点点。

1.3 结果

nav覆盖了大部分bgshadow的background，但留下了一条细细长长的部分。这部分就成了虚拟的阴影，在人眼中，nav bar就变得立体起来。

2 直接用图片，把第一种方法用图片保存下来，直接background-image。

推荐

Author: <zfreay@ZFREAY-PC>

Date: 2011-06-28 20:05:59

HTML generated by org-mode 6.33x in emacs 23