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实现跳动的动画效果
Sep 12 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 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
杏林同学录(一)
2006/10/09 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
浅谈php提交form表单
2015/07/01 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
python中随机函数random用法实例
2015/04/30 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
python获取引用对象的个数方式
2019/12/20 Python
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
八年级语文教学反思
2014/02/11 职场文书
效能风暴心得体会
2014/09/04 职场文书
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python