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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 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
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
python 实现倒排索引的方法
2018/12/25 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
现场施工员岗位职责
2014/03/10 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
美容院合作经营协议书
2014/10/10 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
毕业论文致谢词
2015/05/14 职场文书
运动会观后感
2015/06/09 职场文书