早期制作圆角都是使用图片来实现、通过用1px 的水平线条来堆叠出圆角或者利用JavaScript等等方法,但是都是需要增加多个无意义的标签来实现,造成代码亢余。如今有了CSS3的圆角属性——border-radius后,我们不必会每种不同的圆角制作图片而烦恼了,即减少了图片的更新制作,减少了亢余标签,我们可以直接使用CSS3中的Border-radius来制作。

Border-radius圆角属性

/* 四個方位角同时设定 */
border-radius:[<length>|<percentage>]{1,4}[/ [ <length> | <percentage> ]{1,4} ]?
/*分別设定*/
border-top-right-radius:[<length>|<percentage>][<length>|<percentage>]?
border-bottom-right-radius:[<length>|<percentage>][<length>|<percentage>]?
border-bottom-left-radius:[<length>|<percentage>][<length>|<percentage>]?
border-top-left-radius:[<length>|<percentage>][<length>|<percentage>]?

Border-radius基本语法:

取值:

<length>:用长度值设置对象的圆角半径长度,单位可以是em、ex、pt、px。不允许负值。

<percentage>:用百分比设置对象的圆角半径长度。不允许负值。

浏览器支持情况

截至文章发表,除了IE9以下不支持,firefox和chrome等现代浏览器最新版本都支持border-radius 。

编写代码时可以直接写border-radius,也可以前加-webkit或者-moz前缀。注意如果border-radius单独写给Mozilla (火狐),Mozilla (火狐)写法跟W3C标准写法(webkit的实现方法与W3C一样)有点不同,如下

  • 上左:W3c的写法:border-top-left-radius,Mozilla (火狐)的写法: -moz-border-radius-topleft
  • 上右:W3c的写法:border-top-right-radius,Mozilla (火狐)的写法: -moz-border-radius-topright
  • 下右:W3c的写法:border-bottom-right-radius,Mozilla (火狐)的写法: -moz-border-radius-bottomright
  • 下左:W3c的写法:border-top-left-radius,Mozilla (火狐)的写法: -moz-border-radius-bottomleft
.radius1 {
border-radius:10px20px30px40px/40px30px20px10px;}/*这个等同于*/.radius2 {
border-top-left-radius:10px40px;
border-top-right-radius:20px30px;
border-bottom-right-radius:30px20px;
border-bottom-left-radius:40px10px;}

圆角可一起写在border-radius属性,也可以四个值分开写

Border-radius详解

border-radius方位简写方式

border-radius有四个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置,border-radius简写方式如下

  1. border-radius只有一个方位上的角度值时,四个角具有相同的圆角值
  2. border-radius有两个方位上的角度值时,top-left和bottom-right是第一个圆角值;top-right等于bottom-left是第一个圆角值。
  3. border-radius有三个方位上的角度值时,此时top-left是第一个圆角值;top-right是第二个圆角值;bottom-right是第三个圆角值;bottom-left是第二个圆角值;
  4. border-radius有四个方位上的角度值时,此时top-left是第一个圆角值;top-right是第二个圆角值;bottom-right是第三个圆角值;bottom-left是第四个圆角值;

border-radius简写实例代码,如下:

/* 先设定 X 轴(水平)再设定 Y 轴(垂直) */.radius3 {
border-radius:70px10px10px10px/70px10px10px10px;}

border-radius简写

水平、垂直半径

border-radius圆角半径有水平和垂直半径之分,如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。

而如果border-(top或bottom)-(left或right)-radius四个分开来写,不是用“/”来表示水平、垂直半径而是以空格分隔来表示。如下:

border-radius:10px20px30px100px/5px10px15px80px;/*“/”前面四个参数代表四角上的水平半径,“/”后面四个参数代表四角上的垂直半径 */
border-radius:10px/10px5px;/*水平半径都为10px,垂直两两对应10px和5px */
border-top-left-radius:10px30px;/*border-radius左上角单独设定水平 垂直半径 */

因为圆角有水平、垂直半径之分,所以圆角不仅可以使圆角的,可以是椭圆角的,

圆角曲线

水平/垂直半径决定了该角落的曲线。下图展示了可能出现不同绝对长度半径的几中情况:

border-radius圆角曲线

border-radius圆角不允许相互重叠,所以当相邻两个角半径之和大于所在矩形区域高/宽的大小时,曲线圆角将以同样比例收縮所有相应半径直到曲线彼此不重叠。这个比例如下:f = min(Li/Si),i ∈ {top, right, bottom, left},Ltop = Lbottom = 所在边界框的宽,Lleft = Lright = 所在边界框的高。如果f < 1,那么所有角半径都乘以f。可以理解为,当Li< Si时,圆角曲线半径按f比例缩小。

border-radius圆角曲线绝对长度是一种表现形式,百分比也可以表示。而百分比则是以边界框为标准。所以使用百分比圆角曲线大小受边界框的宽、高影响。

现在我们拿百分比来实验相邻圆角半径之和Si大于Li。

首先我们得清楚在50%情况下,水平、垂直半径各是多少,如下:

  • box-sizing: content-box时:水平半径50%等于width/2+padding+border;垂直半径则等于height/2+padding+border
  • box-sizing: border-box时:水平半径50%等于width/2;垂直半径则等于height/2

当水平、垂直都是50%时矩形则变成椭圆;如果是正方形则变成特殊的椭圆:圆。如下代码:

.radius-content-box{
width:40px;
height:40px;
border: solid 30px;
padding:10px;
border-color: orange orange silver silver;
border-top-left-radius:50%;
border-top-right-radius:60px;/*box-sizing是border-box时水平半径50%等于width/2+padding+border(水平方向上的),垂直半径等于height/2+padding+border*/
border-bottom-right-radius:50%;
border-bottom-left-radius:50%;/*box-sizing默认值是content-box;*/}.radius-border-box {
width:90px;
height:90px;
padding:10px;
border: solid 30px;
border-color: orange orange silver silver;
border-top-left-radius:50%;
border-top-right-radius:45px;/*box-sizing是border-box时水平半径50%就是width值(水平方向上的),垂直半径等于heigh值*/
border-bottom-right-radius:50%;
border-bottom-left-radius:50%;
box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

border-radius圆角曲线等于50%时

所以在半径等于50%时,矩形就会变成椭圆,正方形变成圆形。如果大于50%,即半径和大于相应边界框的宽(高)时,则按照上面说的 f = min(Li/Si) f比例比例缩小半径;如果一个矩形在相邻同方向上的半径都相等,则这个矩形都将变形成椭圆,如果是正方形则一直是圆形,如下代码:

.radius5 {
border-radius:50%;/*60%、100%、129% 都是圆形 */}

border-radius内、外半径之分

内边半径等于外边半径减去对应边border的宽度,既border-width影响圆角的内半径。

所以当border-radius半径小于等于border-width的宽度时,border-radius圆角无内角;当border-radius半径大于border-width的宽度时,border-radius出现内角,看起来像一个圈。如下代码:

.radius-boder-width{
border:25px solid red;
border-radius:15px25px45px65px;}

上例代码则出现如下图

你看我top上的内圈还是直角的,囧~~~

border-radius内半径受border-width影响

如果角的两个相邻边框(border)有不同的宽度,那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。所有border-style(solid、dotted、inset等)跟著border-radius圆角的的曲線走。

这里还得注意在条相邻边的border-style转变的中心点是在一个和两边宽度成正比的角上。比如,两条边宽度相同,这个点就是一个45°的角上,如果一条边是另外一条边的两倍,那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。

.radius-border-width-style{
border-color: red blue green yellow;
border-style: solid;
border-width:10px5px;
border-radius:80px/40px;}

上例代码则出现如下图

border之间的分界线也受border-width的影响

border分界线

border-radius应用

注意点

  1. border-radius不能直接作用于img元素,除firefox其他浏览器貌似效果有点悲剧,border-radius将图片内容都剪切了
  2. 因为table的样式属性border-collapse是collapse时,所以border-radius圆角不能正常显示,只有border-collapse: separate;时才能正常显示。

持续更新 本页所有DEMO

出自:http://www.html5jscss.com/css3-border-radius-55.html

图解css3のborder-radius的更多相关文章

  1. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  2. 《图解CSS3:核心技术与案例实战》

    <图解CSS3:核心技术与案例实战> 基本信息 作者: 大漠 丛书名: Web开发技术丛书 出版社:机械工业出版社 ISBN:9787111469209 上架时间:2014-7-2 出版日 ...

  3. 图解CSS3核心技术与案例实战(1)

    前言: 我买了一本<图解CSS3核心技术与案例实战>大漠写的,为了提高自己的自觉性呢,抓紧看书,把读书笔记放在这上面,跟大家一起分享,也为督促自己完成读书计划. 文末有微信公众号,感谢你的 ...

  4. 《图解CSS3》——笔记(二)

    作者:大漠 勘误:http://www.w3cplus.com/book-comment.html 2014年7月15日15:58:11 第二章  CSS3选择器 2.1  认识CSS选择器 2.1. ...

  5. 《图解CSS3》——笔记(一)

    作者:大漠 勘误:http://www.w3cplus.com/book-comment.html 2014年7月14日14:46:35 第一章  揭开CSS3的面纱 1.1  什么是CSS3 CSS ...

  6. [已读]图解CSS3核心技术与案例实战

    买的时候犹豫了好久,也征询了下几个前端朋友.我一直蛮怕买华章的书,好在这本内容很不错,买得值了. 大漠的css功底很深厚,这本书也很厚= =,读完之后对css圆角以及background-origin ...

  7. css3 border img 边框图片

    摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘 ...

  8. 图解css3学习笔记

    (0)css3是啥 css3是最新版本的css,添加了许多新的特性,将切图仔从繁重的工作中解救出来. css3现在主流的浏览器大部分都支持(ie9部分支持,ie8之前的都不支持) 渐进增强,优雅降级 ...

  9. CSS3 border属性的妙用

    .ribbon { background: #45c9c8; position: absolute; width: 75px; height: 25px; line-height: 25px; top ...

随机推荐

  1. hdu畅通工程

    传送门 畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  2. 1130 host is not allowed to connect to

    mysql 远程访问不行解决方法 Host is not allowed to connect to this MySQL server 如果你想连接你的mysql的时候发生这个错误: ERROR 1 ...

  3. Mesos以及Marathon安装总结

    安装了将近一周的环境了,终于把Mesos以及Marathon给安装上了,我指的离线安装. 策略1: 严格的按照官网的流程: http://mesos.apache.org/gettingstarted ...

  4. TreeView滚动TreeViewItem

    今天帮忙修了一个bug, 在拖动TreeViewItem时,需要滚动TreeView向前翻页,或向后翻页. 思路: 1.找到TreeView控件里的ItemsControl 2.找到ItemsCont ...

  5. WPF 后台触发 Validate UI‘s Element

    wpf中有validateRule类, 用于界面元素的验证, 如何后台去控制validateRule呢? 1. UI层要binding写好的ValidateRule,分为Binding和MultiBi ...

  6. NancyFX 第一章 NancyFX 简介

    Nancy是.NET 平台的微框架.在受到Ruby社区的Sinatra框架启发下,NancyFx框架提供一个.NET平台下的低门槛.易上手的可用于Web开发工具包. 请注意我说的是可用于Web开发,这 ...

  7. App Distribution Guide--(三)---Configuring Your Xcode Project for Distribution

    Configuring Your Xcode Project for Distribution You can edit your project settings anytime, but some ...

  8. Jdk 1.7*安装并配置

    jdk 1.7的下载,见http://www.cnblogs.com/lchzls/p/6281448.html 新建JAVA_HOME指明JDK安装路径,就是刚才安装时所选择的路径C:\Progra ...

  9. jdbcTemplate简单使用

    package com.bizvane.spider.tools; import org.apache.commons.dbcp.BasicDataSource; import org.springf ...

  10. 存储过程为参数NULL时的处理方法

    准备一些数据: SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[Goods]( ) NULL, ) NULL, ...