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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
纯CSS3实现Material Design效果
Mar 09 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 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加密解密的代码
2007/07/16 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
JavaScript 参考教程
2006/12/29 Javascript
sina的lightbox效果。
2007/01/09 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
Shell编程面试题
2012/05/30 面试题
妇科医生自荐信
2013/11/05 职场文书
会计电算化个人自我评价
2013/11/17 职场文书
大学生求职意向书
2015/05/11 职场文书
施工安全责任协议书
2016/03/23 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电