Total Pageviews

Tuesday 26 March 2013

如何让你的网页在老IE下也能显示圆角?

我们知道,利用 CSS3 的 border-radius 属性能够令网页元素表现圆角,不过,今天要讲的这个话题似乎已经显得有些多余了,因为目前绝大多数的浏览器都已经支持 border-radius 属性,而老式的IE浏览器们如 IE6、IE7 或 IE8 虽然不支持 border-radious 属性民,但老早就应该被淘汰了,只是有部分用户还对它们依依不舍,欲弃不能,那么,本文所讲的这个小小技巧可能就会对他们有用。

通常,要使用网页中的某些元素呈现圆角,我可以使用 CSS3 的 border-radious 属性,在需要显示圆角的CSS元素中添加如下的属性值即可:
   
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border: 1px solid #333;

属性中的值大家可以根据自己的喜好更改,如将 8px 改为 5px 等。如:
   
#wrapper{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 8px;
border: 1px solid #333;
}

Firefox, Safari 和 Chrome 等浏览器默认支持这些属性,但是,对于 IE9 以下的旧版 IE 来说,它们就会无视(不支持)以上的 CSS 属性,那怎么办呢?方法是有的,而且也相当简单。

1.首先下载一个小小的 java 文件 Curvy Corners - http://www.curvycorners.net/到桌面上,解压缩,将其中的 curvycorners.js 文件上传到服务器上当前主题下的 js 文件夹(没有就创建一个)中.

2.然后,打开主题中的 functions.php 文件,在适当的位置(一般就在最后一个?> 标签之前)上添加以下函数:
   
function add_sb_scripts(){
  wp_register_script('curvycorners', get_stylesheet_directory_uri() .'/js/curvycorners.js');
  wp_enqueue_script('curvycorners');
  }
  add_action('init','add_sb_scripts');

一旦保存 functions.php 文件,你的网页在老 IE 浏览器下就能够显示圆角了。