css3的圆角属性

最新推荐文章于 2025-08-12 16:33:58 发布

an_feng

最新推荐文章于 2025-08-12 16:33:58 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css3 ie

本文链接：https://blog.youkuaiyun.com/an_feng/article/details/84294961

css3 专栏收录该内容

0 篇文章

订阅专栏

本文探讨了CSS3如何帮助网页设计师通过简单的CSS属性来替代图片，从而减轻服务器请求压力并提高网页打开速度。重点介绍了边框圆角属性（border-radius）的使用方法，包括不同浏览器的支持及在不同浏览器下的应用技巧。此外，文章还讨论了如何在Internet Explorer等不完全支持CSS3特性的浏览器中实现圆角效果，并提供了相关解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3让网页设计者脱离图片，通过简单的CSS属性实现强大的页面展现。这样不仅仅减小了服务器的请求压力，同样也会使网页打开速度明显提高。

border-radius这个属性，是标准的创建圆角的属性，全面的支持Chrome、FireFox和safari.通常我们的写法如下：

写道

border-radius: 10px; /* CSS3 Property */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Chrome/Safari */ -khtml-border-radius: 10px; /* Linux browsers */

这四个属性理解起来很简单。分别设置四个角的圆角弧度10px.你也能按照你的设计改变任何一个角的弧度，跟padding、margin一样，你能分别设置左上、右上、右下、左下四个角的弧度。

写道

/* Firefox */ -moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;

也能将四个属性混合在一起使用。顺序为：

[左上] [右上] [右下] [左下]顺时针方向

写道

-moz-border-radius: 10px 20px 30px 0;

接下来，我们看在IE下面，这个属性的用法。前段设计者都知道，在写CSS时，IE是比较变态的。要作为特殊进行处理。然而CSS3仅有部分属性是支持IE9的，我们怎样才能让他在IE其他版本浏览器中无缝衔接呢？

首先，要从Google Code下载一个 curved-corner.htc 文件,把他按照下面的属性的写法部署到主题包或者写在你的CSS样式文件中。

写道

.Corners {
behavior: url(Location of border-radius.htc file);
border-radius: 20px;
}

按照你的路径，修改部署到服务器上。这样，就可以在IE其他版本下，放心的使用CSS3的圆角属性了。。。