CSS3 圆角效果


Posted in HTML / CSS onJuly 15, 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来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
CSS3 完美实现圆角效果
Jul 13 #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
You might like
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
选择python进行数据分析的理由和优势
2019/06/25 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
Python更换pip源方法过程解析
2020/05/19 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
师范毕业生自我鉴定
2014/01/15 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
合作投资意向书
2014/04/01 职场文书
安全月宣传标语
2014/10/07 职场文书
2014年安全员工作总结
2014/11/13 职场文书
2014年财政所工作总结
2014/11/22 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
linux下安装redis图文详细步骤
2021/12/04 Redis