网站案例作品

知识分享

网页设计的CSS3圆角效果

发表日期：2020/9/11 17:29:36 文章编辑： 浏览次数：2668

CSS3圆角效果

以往在网页设计的时候，要做圆角都要很辛苦的做图片，我们一开始介绍了制作圆角的方便网站，后来我们又介绍了使用Javascript制作圆角的方法，今天来跟大家介绍CSS3的圆角效果，更快更方便，不过前提是浏览者使用够新的浏览器:)
目前各浏览器最新版本都支援CSS3的圆角效果，下面列出各浏览器在小边写这篇文章时最新版本的载点：
Firefox 7.0 Google Chrome 14 IE 9 Opera 11 Safri 5 (上面的清单是按照字母排序的，虽然刚好和小编的使用频率一样XD)，大家快去更新吧，为了更好的浏览效果!

DEMO范例

圆角示范

语法说明

只需要在CSS里面加入下面这两行就可以了

border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */

也可以做一些变化，填入不同的圆角半径，分别是代表左上右上右下左下

border-radius:40px 30px 40px 10px;
-moz-border-radius:40px 30px 40px 10px; /* Firefox 3.6 and earlier */

各圆角不同示范 

参考连结: W3Cschools


标签： 网站设计 CSS
将文章分享到..
上一篇下一篇
相关新闻
全新新闻
随机新闻
最新网站设计案例

我们来谈谈您的网站建设项目.

现在联系!!
Hi，我来帮您！