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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 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
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
asp.net和php的区别点总结
2019/10/10 PHP
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
Django内容增加富文本功能的实例
2017/10/17 Python
Python3 处理JSON的实例详解
2017/10/29 Python
python更改已存在excel文件的方法
2018/05/03 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
python Matplotlib模块的使用
2020/09/16 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
大学生职业生涯规划方案
2014/01/03 职场文书
企业宣传策划方案
2014/05/29 职场文书
统计学教授推荐信
2014/09/18 职场文书
财务工作检讨书
2014/10/29 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
MySQL如何解决幻读问题
2021/08/07 MySQL