jQuery插件Round Shadow实现圆角和阴影（使用）

Question

使用该插件的基本语法如下：
$(selector).roundShadow(options);或jQuery(selector).roundShadow(options);
options的可选项针对不同的装饰方式分如下三种情况：
共同部分：
theme{String} : 装饰方法，可选项有"default","simple","css"。其中"default"使用table标签对元素进行装饰，"simple"使用框模型对元素进行装饰，"css"使用css3对元素进行装饰。
不同部分：
theme = "default"：
radius{String,Number}: 圆角半径，即所裁剪的圆角阴影图片的左上角的宽度（裁剪部分应为四分之一圆，且高宽应一样），单位为"px"，不接受其他单位的大小值，也可以使用数字。默认值为"12px"。
tag{String}: 指定对所装饰节点的文本节点所添加的HTML标签，默认值为"<div></div>"。
theme = "simple"：
prefix{String}: 对所装饰节点应用的圆角和阴影的css类前缀，假如类前缀为"simple-round-shadow"（插件默认使用的类），则至少需定义如下类："simple-round-shadow-body"，"simple-round-shadow-top"，"simple-round-shadow-bottom"，且类中必须要指定background-image的值。默认值为"simple-round-shadow"。
tag{String}: 指定对所装饰节点的文本节点所添加的HTML标签，默认值为"<div></div>"。
theme = "css"：
shadowXOffset{String,Number}: 阴影在X轴上的偏移量，以"px"为单位。默认为"1px"。
shadowYOffset{String,Number}: 阴影在Y轴上的偏移量，以"px"为单位。默认为"1px"。 shadowDepth{String,Number}: 阴影的浓度，以"px"为单位。默认为"4px"。
shadowColor{String}: 阴影颜色。默认为"#000000"。
roundRadius{String,Number}: 圆角半径，以"px"为单位。默认为"10px"。
border{String}: 元素边框样式，与css中的border设置相同。默认为"1px solid #000"。
CSS类定义说明：
1、当theme为"default"，并且要使用自定义的css类时需注意，必须定义以下类：
"round-shadow-top-left","round-shadow-top-edge","round-shadow-top-right";
"round-shadow-left-edge","round-shadow-center-board","round-shadow-right-edge";
"round-shadow-bottom-left","round-shadow-bottom-edge","round-shadow-bottom-right";
与默认使用的css类只有相应的背景图片和图片的高宽需要根据具体情况进行修改，其他的都需要和默认的定义相同。默认样式如下：

1. .default-round-shadow {
2. }
3. .default-round-shadow table {
4. }
5. /* round shadow panel's top*/
6. .round-shadow-top-left {
7.         width: 12px;
8.         height: 12px;
9.         background: transparent url("images/default/top_left.png") no-repeat;
10. }
11. .round-shadow-top-edge {
12.         height: 12px;
13.         background: transparent url("images/default/top_edge.png") repeat-x;
14. }
15. .round-shadow-top-right {
16.         width: 12px;
17.         height: 12px;
18.         background: transparent url("images/default/top_right.png") no-repeat;
19. }
20. /* round shadow panel's body*/
21. .round-shadow-left-edge {
22.         width: 12px;
23.         background: transparent url("images/default/left_edge.png") repeat-y;
24. }
25. .round-shadow-center-board {
26.         background: transparent url("images/default/center_board.png") repeat;
27. }
28. .round-shadow-right-edge {
29.         width: 12px;
30.         background: transparent url("images/default/right_edge.png") repeat-y;
31. }
32. /* round shadow panel's bottom*/
33. .round-shadow-bottom-left {
34.         width: 12px;
35.         height: 12px;
36.         background: transparent url("images/default/bottom_left.png") no-repeat;
37. }
38. .round-shadow-bottom-edge {
39.         height: 12px;
40.         background: transparent url("images/default/bottom_edge.png") repeat-x;
41. }
42. .round-shadow-bottom-right {
43.         width: 12px;
44.         height: 12px;
45.         background: transparent url("images/default/bottom_right.png") no-repeat;
46. }

复制代码2、当theme为"simple"，并且使用自定义的css类时同样需注意如下要求：
    假如使用的prefix为simple，则需定义simple-body,simple-top和simple-bottom三个类，并且在这三个类中均要指定背景图片的url且背景色最好设置为transparent。默认样式如下：

1. .simple-round-shadow {
2.         background-color: transparent;
3. }
4. .simple-round-shadow-top {
5.         /* background-image is necessary*/
6.         background: transparent url("images/simple/top.png") no-repeat;
7. }
8. .simple-round-shadow-body {
9.         /* background-image is necessary*/
10.         background: transparent url("images/simple/body.png") repeat-y;
11. }
12. .simple-round-shadow-bottom {
13.         /* background-image is necessary*/
14.         background: transparent url("images/simple/bottom.png") no-repeat;
15. }

复制代码项目已放到Google Code上，可以下载：http://code.google.com/p/jquery-round-shadow/

原文 http://www.javaeye.com/topic/913994