CSS3中border-radius属性设定圆角的使用技巧


Posted in HTML / CSS onMay 10, 2016

border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着,除去Internet Explorer 8及更低版本,所有的浏览器可以显示圆角。
为了使样式能正确应用,需要为Webkit和Mozilla内核添加前缀。

CSS Code复制内容到剪贴板
  1. -webkit-border-radius: 10px;   
  2. -moz-border-radius: 10px;   
  3. border-radius: 10px;  

然而,今天我们不关心前缀,只简单坚持官方形式:border-radius。
CSS3中border-radius属性设定圆角的使用技巧

如你所料,我们可以为每个角指定不同的值。
CSS3中border-radius属性设定圆角的使用技巧

CSS Code复制内容到剪贴板
  1. border-top-left-radius: 20px;   
  2. border-top-rightright-radius: 0;   
  3. border-bottom-rightright-radius: 30px;   
  4. border-bottom-left-radius: 0;  

在上面的代码中,设置border-top-right-radius和border-bottom-left-radius为零是多余的,除非该元素有继承的值。
按top-left, top-right, bottom-right, bottom-left顺序设置每个 radius 的值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。
我们可以实验,

CSS Code复制内容到剪贴板
  1. border-radius:2px;  

等价于:

CSS Code复制内容到剪贴板
  1. border-top-left-radius:2px;   
  2. border-top-rightright-radius:2px;   
  3. border-bottom-rightright-radius:2px;   
  4. border-bottom-left-radius:2px;  

例子2:

CSS Code复制内容到剪贴板
  1. border-radius:2em 1em 4em / 0.5em 3em;  

等价于:

CSS Code复制内容到剪贴板
  1. border-top-left-radius:2em 0.5;   
  2. border-top-rightright-radius:1em 3em;   
  3. border-bottom-rightright-radius:4em 0.5em;   
  4. border-bottom-left-radius:1em 3em;  

就像margin和padding一样,如果需要的话,这些设置可以合并为一个单一的属性。

CSS Code复制内容到剪贴板
  1. /* 左上角, 右上角, 右下角, 左下角 */  
  2. border-radius: 20px 0 30px 0;  

举个例子(网页设计师经常这样做),可以用CSS的border-radius属性模拟柠檬的形状,如下:

CSS Code复制内容到剪贴板
  1. .lemon {   
  2.    width200pxheight200px;   
  3.     
  4.    background#F5F240;   
  5.    border1px solid #F0D900;        
  6.    border-radius: 10px 150px 30px 150px;   
  7. }  

CSS3中border-radius属性设定圆角的使用技巧

HTML / CSS 相关文章推荐
css3模拟jq点击事件的实例代码
Jul 06 HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
CSS3使用多列制作瀑布流
May 10 #HTML / CSS
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 #HTML / CSS
深入解读CSS3中transform变换模型的渲染
May 27 #HTML / CSS
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 #HTML / CSS
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 #HTML / CSS
CSS3制作精致的照片墙特效
Jun 07 #HTML / CSS
CSS3字体效果的设置方法小结
Jun 13 #HTML / CSS
You might like
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
利用js canvas实现五子棋游戏
2020/10/11 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
Python中asyncore的用法实例
2014/09/29 Python
python关键字and和or用法实例
2015/05/28 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
Python datetime模块的使用示例
2021/02/02 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
项目总经理岗位职责
2014/02/14 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
优秀家长自荐材料
2014/08/26 职场文书
律师函格式范本
2015/05/27 职场文书
新年晚会开场白
2015/05/29 职场文书