html+css兼容各种浏览器写圆角的方法

第一种方法：用jQuery写圆角。

首先下载: jQuery.corner.js这个文件，在下载一个jQuery.js(版本最好要在1.3以上)

<script type="text/javascript">

    jQuery(function(){

        $("#testcorner").corner("round 10px");

    });   

</script>

corner默认属性是 round(圆角);

也有别的常用的样式可以参照网站：http://www.zhangxinxu.com/study/201001/jquery-plugin-round-corner.html

-----------------------------------------------------------------------------------------------------------------------------------------------------------

css部分：

<style type="text/css">

.testcorner{

    width:200px;

    height:200px;

    background:#ff0000;

    border:1px solid #999;

}

</style>

------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML部分：

<div id="testcorner"></div>

页面只要调用这个方法就可以了。

 

==================================================================================================

 

第二种方法：用js写圆角。

首先下载:PIE.js文件 和 PIE.htc文件，这两个是js写圆角的文件。百度有很多下载地址。

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

页面js要引用这个文件。

------------------------------------------------------------------------------------------------------------------------------------------------------------

css部分:

<style type="text/css">

.corner{

    width:200px;

    height:200px;

    background:#ff0000;

    border:1px solid #999;

    behavior:url(PIE.htc);

    border-radius:10px;

    -moz-border-radius:10px;

    -webkit-border-radius:10px;

}

</style> 

-moz兼容火狐的方法。

-webkit兼容别的浏览器的方法。

PIE.htc是只兼容IE的方法。

css部分 有时间可能因为自己嵌套页面的问题 或者别的css影响的问题不出现这个圆角。可以用position来解决。

------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML部分：

<div class="corner"></div>

页面只要调用这个方法就可以了。

 

 

O了~~希望大家喜欢web脚本技术。