想让自己的按钮btn加背景有阴影代码怎么写

box-shadow和text-shadow是CSS3新增的两个重要的属性，它们可以很方便的实现块级元素阴影和文字的阴影。但是，如果如果阴影的颜色使用半透明效果，岂不是更好?这样元素可以更好的和背景融合到一起。值得注意的是，FF只有等到3.5版本才支持text-shadow属性(目前Firefox3.5beta4版本已经支持)。

.btn

{

...

background:

#222

url(sprites.png)

repeat-x

/**背景图片**/

-moz-border-radius:

5px

-webkit-border-radius:

5px

border-radius:

5px

/**圆角**/

-webkit-box-shadow:

0

1px

3px

rgba(0,

0,

0,

0.5)

-moz-box-shadow:

0

1px

3px

rgba(0,

0,

0,

0.5)

/**按钮阴影**/

text-shadow:

0

-1px

1px

rgba(0,

0,

0,

0.25)

/**文字阴影**/

}

好了，到现在，我们的按钮已经完全做好了。它已经实现我们的目标了。

方法有很多种，常用的其实有两种：

1# 直接添加CSS3阴影

.style {

  -moz-box-shadow: 0 0 8px black

  -webkit-box-shadow: 0 0 8px black

  box-shadow: 0 0 8px black

}

box-shadow: 上偏移 左偏移 投影大小 投影颜色（支持rgba透明）

这种方法的弊端是必须支持CSS3的浏览器，低版本浏览器一把不兼容，是看不到这个效果的，例如ie6 7 8

2# 用png图做投影

方法就是将投影切一个透明图，然后放在你需要加投影的盒子外面，见图：

给box加一个背景， 内容放在里面的content里，搞定

---