如何在CSS里面定义一个立体感很强的按钮

html-css019

如何在CSS里面定义一个立体感很强的按钮,第1张

border-color: black #000000 #000000 black你把边框都设置成了黑的,当然看不出立体感了!!

-->

border-color: gray #000000 #000000 gray

能否说得详细一点,什么叫立体效果的背景图片? 非要通过css设置,就只能设置左边和顶边的边框为浅色模拟高光,右边和底边的边框为深色模拟阴影来做立体效果。如果要复杂一些的立体效果,你就必须通过图片来做了,使用绘图软件绘制一个立体效果的按钮,然后设为按钮背景即可

要让按钮做到有凹凸感,实际上就是利用光线照射来形成阴影的原理。

这是最简单也是最常见的一种,光线从左上方照过来,使按钮的右侧和下方形成深色阴影(可以根据需要调节边框的宽度和颜色):

<input type="button" value="有凹凸感的按扭" style="border:1px solid #dddborder-bottom:1px solid #333border-right:1px solid #333" />