CSS3 圆角效果


Posted in HTML / CSS onJuly 15, 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 相关文章推荐
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
CSS3 完美实现圆角效果
Jul 13 #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
You might like
php 模拟POST提交的2种方法详解
2013/06/17 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
js控制淡入淡出示例代码
2013/11/12 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
js的对象与函数详解
2019/01/21 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
python回调函数的使用方法
2014/01/23 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
Django框架表单操作实例分析
2019/11/04 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
人事主管岗位职责
2014/01/30 职场文书
工程建设实施方案
2014/03/14 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Python加密技术之RSA加密解密的实现
2022/04/08 Python