CSS3 完美实现圆角效果


Posted in HTML / CSS onJuly 13, 2009

 现在使用CSS3 技术不需要图片即可实现圆角,把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性:border-radius,Firefox 和 Safari 也通过私有属性实现了该功能:

Firefox 和 Safari 实现圆角

    效果如下:

CSS3 完美实现圆角效果

    其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-radius 是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性,如果你只要指定某一个角是圆角的话,它们都分别定义了四个属性:

-moz-border-radius-topleft / -webkit-border-top-left-radius-moz-border-radius-topright / -webkit-border-top-right-radius-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

    当然 IE (包括 IE8)还是不支持,所以该效果只能在 Firefox, Safari, 以及 Chrome 中查看。

HTML / CSS 相关文章推荐
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
CSS3 box-sizing属性
Apr 17 #HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 #HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 #HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 #HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 #HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 #HTML / CSS
介绍CSS3使用技巧5个
Apr 02 #HTML / CSS
You might like
Yii框架登录流程分析
2014/12/03 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python创建模块及模块导入的方法
2015/05/27 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Django返回HTML文件的实现方法
2020/09/17 Python
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
会计电算化实训报告
2014/11/04 职场文书
2014会计年终工作总结
2014/12/20 职场文书
泰山导游词
2015/02/02 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS