网页设计的CSS3圆角效果
发表日期:2020/9/11 17:29:36 文章编辑: 浏览次数:1551
以往在网页设计的时候,要做圆角都要很辛苦的做图片,我们一开始介绍了制作圆角的方便网站,后来我们又介绍了使用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
-
网站规划如何理解并规划网站的结构设计?
日期:2021-03-29 浏览次数:1610
-
网站设计的CSS3 渐层特效教学
日期:2020-09-11 浏览次数:1346
-
网页设计中纯CSS3动画区块代码书写方法。
日期:2020-09-11 浏览次数:1631
-
如何在北京顺义寻找一个踏实的网站建设公司
日期:2023-08-10 浏览次数:1377
-
顺义网站建设:北京顺义网站建设的优点
日期:2023-05-25 浏览次数:1852
-
选择网站公司需要考虑哪些因素
日期:2023-05-25 浏览次数:1400
-
北京模板建站
日期:2023-03-28 浏览次数:1489
-
顺义做网站的公司价格高
日期:2023-03-28 浏览次数:1420
-
响应式网站设计:必须具备的7个理由
日期:2019-06-18 浏览次数:1646
-
HTML5性能问题可能来自多方面.
日期:2015-07-16 浏览次数:2354
-
为什么要关注主页的设计?设计网站主页有哪些重要提示
日期:2019-07-24 浏览次数:1592
-
创建网站有效标题的提示
日期:2019-01-16 浏览次数:1691
-
HTTP与HTTPS安全性和排名性能
日期:2019-07-15 浏览次数:1586