CSS3 框阴影(box-shadow)效果在线生成器

以所见即所得的交互方式生成CSS3框阴影(box-shadow)效果及其代码。

1. 主要设置
|
deg
px
px
r
g
b
2. 可选设置
Generated CSS:

框阴影(box-shadow)功能说明

CSS3 box-shadow 属性用于给HTML元素添加增强的阴影效果,而这些效果以前只能通过图片的方式来设计和制作,图片的方式性能低且不够灵活。 该属性已得到现代浏览器的广泛支持。

box-shadow 属性的语法如下:

参数说明请参考W3School在线手册


浏览器兼容性

除了一些陈旧的浏览器外,现代浏览器都已经支持该属性:

Browser Supports text-shadow?
Firefox 3.1+ Full Support
Firefox 1-3 No
Safari 4+ Full Support
Safari 3.1+ Partial Support
Chrome 2+ Full Support
Chrome 1 No
IE9 Full Support
Opera 9.5+ Full Support