长春网

标题: 让IE6支持CSS3圆角属性的两种方法 [打印本页]

作者: xgnic 时间: 2013-4-3 22:41:18 标题: 让IE6支持CSS3圆角属性的两种方法

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下载

欢迎光临长春网 (http://04316.com/)