让IE6支持CSS3圆角属性的两种方法

xgnic 实名认证

1、curvycorners.js引用实现

[backcolor=rgb(255, 255, 255) !important][size=1em][size=1em]

1	<script src="curvycorners.js" type="text/javascript"></script>

[backcolor=rgb(248, 248, 248) !important][size=1em]

2

[size=1em]

3

<style>

[backcolor=rgb(248, 248, 248) !important][size=1em]

4

[size=1em]

5	.roundedCorners   {

[backcolor=rgb(248, 248, 248) !important][size=1em]

6

[size=1em]

7	width: 200px;

[backcolor=rgb(248, 248, 248) !important][size=1em]

8

[size=1em]

9	height: 200px;

[backcolor=rgb(248, 248, 248) !important][size=1em]

10

[size=1em]

11	padding: 10px;

[backcolor=rgb(248, 248, 248) !important][size=1em]

12

[size=1em]

13	background-color: Beige;

[backcolor=rgb(248, 248, 248) !important][size=1em]

14

[size=1em]

15	-webkit-border-radius: 10px;

[backcolor=rgb(248, 248, 248) !important][size=1em]

16

[size=1em]

17	-moz-border-radius: 10px;

[backcolor=rgb(248, 248, 248) !important][size=1em]

18

[size=1em]

19

}

[backcolor=rgb(248, 248, 248) !important][size=1em]

20

[size=1em]

21

</style>

[backcolor=rgb(248, 248, 248) !important][size=1em]

22

[size=1em]

23	<script type="text/JavaScript">

[backcolor=rgb(248, 248, 248) !important][size=1em]

24

[size=1em]

25	addEvent(window, 'load', initCorners);

[backcolor=rgb(248, 248, 248) !important][size=1em]

26

[size=1em]

27	function initCorners() {

[backcolor=rgb(248, 248, 248) !important][size=1em]

28

[size=1em]

29	var setting = {

[backcolor=rgb(255, 255, 255) !important][size=1em][size=1em]

1	tl: { radius: 10 },

[backcolor=rgb(248, 248, 248) !important][size=1em]

2

[size=1em]

3	tr: { radius: 10 },

[backcolor=rgb(248, 248, 248) !important][size=1em]

4

[size=1em]

5	bl: { radius: 10 },

[backcolor=rgb(248, 248, 248) !important][size=1em]

6

[size=1em]

7	br: { radius: 10 }, //tl, tr, bl, br分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)

[backcolor=rgb(248, 248, 248) !important][size=1em]

8

[size=1em]

9	antiAlias: true

[backcolor=rgb(248, 248, 248) !important][size=1em]

10

[size=1em]

11

}

[backcolor=rgb(248, 248, 248) !important][size=1em]

12

[size=1em]

13	curvyCorners(setting, ".roundedCorners");

[backcolor=rgb(248, 248, 248) !important][size=1em]

14

[size=1em]

15

}

[backcolor=rgb(248, 248, 248) !important][size=1em]

16

[size=1em]

17

</script>

[backcolor=rgb(248, 248, 248) !important][size=1em]

18

[size=1em]

19

<div>

[backcolor=rgb(248, 248, 248) !important][size=1em]

20

[size=1em]

21

</div>

2、ie-css3.htc，IE利用VML矢量可标记语言作为画笔汇出圆角

[backcolor=rgb(255, 255, 255) !important][size=1em][size=1em]

1	<title>测试主机Content-Type</title>

[backcolor=rgb(248, 248, 248) !important][size=1em]

2

[size=1em]

3	<style type="text/css">

[backcolor=rgb(248, 248, 248) !important][size=1em]

4

[size=1em]

5	.roundedCorners

[backcolor=rgb(248, 248, 248) !important][size=1em]

6

[size=1em]

7

{

[backcolor=rgb(248, 248, 248) !important][size=1em]

8

[size=1em]

9	width: 500px;

[backcolor=rgb(248, 248, 248) !important][size=1em]

10

[size=1em]

11	height: 400px;

[backcolor=rgb(248, 248, 248) !important][size=1em]

12

[size=1em]

13	background-color: blue;

[backcolor=rgb(248, 248, 248) !important][size=1em]

14

[size=1em]

15	padding: 10px;

[backcolor=rgb(248, 248, 248) !important][size=1em]

16

[size=1em]

17	-webkit-border-radius: 10px;

[backcolor=rgb(248, 248, 248) !important][size=1em]

18

[size=1em]

19	-moz-border-radius: 10px;

[backcolor=rgb(248, 248, 248) !important][size=1em]

20

[size=1em]

21	border-radius: 10px;

[backcolor=rgb(248, 248, 248) !important][size=1em]

22

[size=1em]

23	behavior: url(ie-css3.htc);

[backcolor=rgb(248, 248, 248) !important][size=1em]

24

[size=1em]

25

}

[backcolor=rgb(248, 248, 248) !important][size=1em]

26

[size=1em]

27

</style>

[backcolor=rgb(248, 248, 248) !important][size=1em]

28

[size=1em]

29

<div>

这个页面是用以测试主机是否有正确的content-type。

</div>

文件下载：

curvycorners.js下载

ie-css3.rar下载