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中的calc()功能
Jul 14 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 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学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
php随机显示图片的简单示例
2014/02/15 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
python抓取网页中链接的静态图片
2018/01/29 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
德国家具在线:Fashion For Home
2017/03/11 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
react 路由Link配置详解
2021/11/11 Javascript
Python中request的基本使用解决乱码问题
2022/04/12 Python
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis