纯CSS3怎么实现圆角效果?实现圆角效果的方法介绍(含IE兼容解决方法)
2024-06-24 10:34:56阅读量:36 字体:大 中 小
如今,这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持,包括Safari,谷歌浏览器,IE,Opera和火狐浏览器。下面让我们来看看border-radius的语法,解释,以及IE是如何支持它的。

语法和说明
在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似:
上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为10px。你也可以对每个角单独指定:
如果你觉得上面的写法太复杂,可以使用下面border-radius简写的方法:
四个值分别代表的是top-left, top-right, bottom-right, bottom-left四个角。
各浏览器对border-radius的支持
因为这种圆角技术是CSS3里出现的,老式浏览器或较早期的浏览器中用到这个属性时需要在CSS里添加浏览器引擎前缀(vendor prefixes)。会是{prefix}-border-radius这样一个样子,而具体各种浏览器引擎前缀是下面这样的写法:
基本上,你需要对每种浏览器引擎做各自的声明,加上这些讨厌的稍微不同的代码来保证完全支持border-radius。但是,如果你使用的是最新版的浏览器,包括火狐、谷歌、IE等,你不需要使用这些前缀,因为这个技术已经很成熟,在各种最新版的浏览器里已经受到了普遍支持。
让IE支持border-radius
直到IE9才有对border-radius属性的支持,相信很多Web开发人员和Web应用设计人员都很沮丧。在IE9里,最重要的一个点是使用edge META 标记:
如果你的IE比较老,不支持border-radius,有很多其它的技术可以弥补这个缺陷,我遇到过的最好的一个解决方法是使用一个很小的JavaScript程序包,叫做CurvyCorners。这个CurvyCorners用javaScript动态的生成很多div标记,用这些div标记来绘出圆角效果,甚至支持消除锯齿功能。
CurvyCorners的用法很简单。第一步是在页面中引入CurvyCorners.js脚本:
CurvyCorners会在DOM元素里寻找具有border-radius属性的元素,然后依次给它们制作出圆角效果。不需要辅助图片。你甚至可以设置指定元素的弧度半径:
我强烈建议你应该指定需要使用圆角的元素,因为让脚本搜索整个页面来寻找需要圆角处理的元素是一个很耗CPU的过程,而且这个过程是每个页面加载时都会执行。
基本的所有浏览器都支持CSSborder-radius属性,包括IE,火狐,Safari,谷歌浏览器和Opera。这个小小的功能能让你的页面表现出完全别样的效果。
免责声明:
本文《纯CSS3怎么实现圆角效果?实现圆角效果的方法介绍(含IE兼容解决方法)》版权归原作者所有,内容不代表本站立场!
如本文内容影响到您的合法权益(含文章中内容、图片等),请及时联系本站,我们会及时删除处理。
推荐阅读

光遇怎么退出当前账号
《光·遇》是由游戏制作人陈星汉及其团队Thatgamecompany开发的社交冒险游戏。以下是推出光遇当前账号的操作方法: 光遇怎么退出当前账号 1、打开光遇app,在初始呈现界面中找到...
阅读: 746

微信接龙管家小程序怎么用
接龙管家小程序,解决了微信/QQ群消息刷屏、无统计、无反馈、无留存的痛点。以下是如何使用微信接龙管家小程序的操作方法: 微信接龙管家小程序怎么用 1、打开微信app,点击搜索按钮,搜索接龙小程序&rd...
阅读: 733

vivo手机查定位找手机
vivo手机系统有查定位找手机的功能,可以利用vivo公司的云服务功能来进行查定位找手机,操作步骤如下: vivo手机查定位找手机 1、打开手机的设置,点击首行的个人头像,进入账号中心页面中。 2、...
阅读: 738

ipad一直语音播报触屏滑不了
ipad一直语音播报触屏滑不了是因为ipad开启了旁白的功能,需要去设置内把该功能进行关闭,操作步骤如下: ipad一直语音播报触屏滑不了 1、打开ipad的设置,点击辅助功能”按钮,进入...
阅读: 812

苹果下载记录永久删除
苹果手机的下载记录是不能删除的,但是可以设置隐藏起来不显示在已购项目中,操作方法如下: 苹果下载记录永久删除 1、打开手机的App Store,点击右上角的苹果id头像,进入账户的页面。 2、点击已...
阅读: 758

vivos12分屏模式怎么开启
vivos12手机的系统自带有分屏的功能,有需要的用户可以开启手机的分屏模式,具体的操作步骤如下: vivos12分屏模式怎么开启 1、打开手机,用手指从手机屏幕的底部向上滑动,这一过程中手指不要松开...
阅读: 804
热门文章
1.剪映怎么局部变色
- 1

- 剪映怎么局部变色
- 2022-12-28
- 1
2.微利贷怎么申请开通
- 2

- 微利贷怎么申请开通
- 2022-12-28
- 2
3.微信怎么转发大量聊天记录
- 3

- 微信怎么转发大量聊天记录
- 2022-12-28
- 3
4.手机美图秀秀怎么移动文字
- 4

- 手机美图秀秀怎么移动文字
- 2022-12-28
- 4
5.快手怎么看不到动态消息私信
- 5

- 快手怎么看不到动态消息私信
- 2022-12-28
- 5
6.天眼查询个人信息怎么查
- 6

- 天眼查询个人信息怎么查
- 2022-12-28
- 6
7.快手登陆手机号不用了收不到验证码怎么办
- 7

- 快手登陆手机号不用了收不到验证码怎么办
- 2022-12-28
- 7
8.免费更改证件照背景色
- 8

- 免费更改证件照背景色
- 2022-12-28
- 8
9.拼多多退货商家拒收后怎么处理
- 9

- 拼多多退货商家拒收后怎么处理
- 2022-12-27
- 9
10.怎么取消淘宝省钱卡的自动续费
- 10

- 怎么取消淘宝省钱卡的自动续费
- 2022-12-27
- 10
最近更新

酷狗音乐中使用蝰蛇音效制作工具的具体操作方法
2024-11-11

win7电脑中出现声音图标不见了的具体解决方法
2024-11-11

车到哪app的详细软件介绍
2024-11-11

小米9se中查看序列号的具体操作方法
2024-11-11

迅雷中使用FTP探测器的详细操作方法
2024-11-11

ppt制作出小荷才露尖尖角动画场景的具体操作步骤
2024-11-11
