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背景下的@font face规则
May 04 HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 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获取远程图片并把它保存到本地的代码
2008/04/07 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP如何使用Memcached
2016/04/05 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
vue实现模态框的通用写法推荐
2018/02/26 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python实现按中文排序的方法示例
2018/04/25 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
python多进程使用函数封装实例
2020/05/02 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
利用指针变量实现队列的入队操作
2012/04/07 面试题
本科生求职简历的自我评价
2013/10/21 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
高中美术教学反思
2016/02/17 职场文书
七年级话题作文之执着
2019/11/19 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
pt-archiver 主键自增
2022/04/26 MySQL