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用@font-face实现自定义英文字体
Sep 23 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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
PHP中的正规表达式(二)
2006/10/09 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
js实现圆盘记速表
2015/08/03 Javascript
PHP7新特性简述
2017/06/11 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
用Python解数独的方法示例
2019/10/24 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
公休请假条
2014/04/11 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
内科护士节演讲稿
2014/09/11 职场文书
商务邀请函
2015/01/30 职场文书
教师辞职信范文
2015/02/28 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
芙蓉镇观后感
2015/06/10 职场文书