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 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
PHP也可以?成Shell Script
2006/10/09 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
php操作mongoDB实例分析
2014/12/29 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
js select option对象小结
2013/12/20 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
Angular路由简单学习
2016/12/26 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
python序列类型种类详解
2020/02/26 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
extern是什么意思
2016/03/10 面试题
医学生自荐信
2013/12/03 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
优秀教师主要事迹
2014/02/01 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
索赔员岗位职责
2015/02/15 职场文书
党支部对转正的意见
2015/06/02 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
Python自动化之批量处理工作簿和工作表
2021/06/03 Python