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 相关文章推荐
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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将时间差转换为字符串提示
2011/09/07 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
社区健康教育工作方案
2014/06/03 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技