border-radius参数详解

原创 2016年06月01日 11:46:55

border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情。radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以创建椭圆角(如图下图第7),把这些角按照不同的顺序和大小来展现,能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。

语法和解释

border-radius可以通过值来定义样式相同的角,也对每个角分别定义。下面的表格解释了各个写法所表示的效果。

语法
border-radius:10px

解释
将创建四个大小一样的圆角,如图1和2。

语法
border-radius:10px 15px 10px 5px;

解释
四个值分别表示左上角、右上角、右下角、右下角。

语法
border-radius:10px 15px;

解释
第一个值表示左上角、右下角;第二个值表示右上角、左下角。

语法
border-radius:10px 15px 5px;

解释
第一个值表示左上角;第二个值表示右上角、左下角;第三个值表示右下角。

语法
border-bottom-left-radius:20px 10px;

解释
创建不对称的角–椭圆角。

语法
border-radius:20px/10px;

解释
写椭圆角的时候,可以用短写法,创建四个一样的椭圆角。

语法
border-radius:10px 20px 30px 40px

解释
四个值分别表示四个角的半径(水平和垂直半径一样),如图11。

语法
border-radius:10px 20px 30px 40px/20px 50px 30px 10px;

解释
斜杠前面的一组四个值分别表示四个角的水平半径;斜杠后面的一组四个值分别表示四个角的垂直半径。如图7。

语法
border-radius:10px 20px 40px/20px 50px

解释
斜杠前面和后面每一组分别表示的是四个角水平半径和四个角垂直半径。两个值、三个值的顺序规则你懂的哈。

对于每个角的两个值,分别代表的是该角的水平方向和垂直方向的半径。若有四个值,上面表格有解释。看下面这个图,或许会清晰些。(如下图)

边框大小和外半径、内半径的关系
实际的内半径相当于外半径减去相应的边框大小。相减的值中如果至少一个为为负值或零,则内半径为直角。不管怎样,相邻的两个边都会形成流畅的线条。(请看下图)

应用实例
border-radius可以用来制作很生动的效果。可以点击下面的链接查看:
border-radius结合Gradients、Box Shadow写的Opra Logo with CSS

兼容Firefox老的版本
为了兼容Firefox3.6及以下版本,需要写上供应商前缀,为-moz-border-radius:5px,对于每个角的语法,则为:-moz-border-radius-topleft:5px;要特别注意这与标准写法不同。

版权声明:版权声明:博客内容整合自多篇文章,如有雷同,并非巧合。纯正开源之美,你我共享

CSS3属性border-radius参数详解

border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情。radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以...
  • u013063153
  • u013063153
  • 2016年10月20日 10:27
  • 3807

border-radius属性值参数详解

border-radius是CSS3设置圆角的一个属性,其属性值得单位可以使用:em、px、百分比等等。但是,border-radius属性值得参数形式有好多种,那么具体都代表什么意思呢?下面以实际例...
  • hl93hnrz
  • hl93hnrz
  • 2017年02月17日 11:56
  • 436

了解一下border-radius的实现原理

一、简述我们都知道css 3有一个属性border-radius可以给盒子设置圆角,我当初也只是知道有这个属性,并且知道一些用法,从来没有深入了解过它的作用原理。我们知道将border-radius设...
  • xiaoermingn
  • xiaoermingn
  • 2016年12月07日 02:06
  • 2701

使用border-radius无效,能看到背景还是方形的,边框变成圆角了的解决方案

解决方案: 1、设置border:none; 去掉边框;2、设置border-radius:40px; 若遇到浏览器兼容的​问题,可加上兼容的css代码;3、最后,使用box-shadow: 0px...
  • qq_17505335
  • qq_17505335
  • 2017年06月15日 15:25
  • 2765

图片transform其父级的border-radius失效

当transform遇见border-radius就会碰出bug的火花
  • u011456552
  • u011456552
  • 2016年12月05日 12:36
  • 1017

让ie7,ie8支持border-radius

, 就支持了,上网查了一下,指的是,在用ie浏览时,使用chrome内核,如果没有安装chrome,则使用支持的最高版本的ie内核,所以看起来好像是支持圆角了,其实是假装的啊。。。。 来源:h...
  • wxq981795514
  • wxq981795514
  • 2015年08月20日 10:17
  • 2040

IE浏览器兼容CSS3新属性border-radius

使用PIE对IE进行CSS3兼容介绍及渲染 重要功能实现:   可以使 IE6、7、8 、9 实现类似 chrome 和 firefox  1.  更自然逼真的阴影效果,不再是以前那种丑陋的滤镜效...
  • oo191416903
  • oo191416903
  • 2017年03月21日 11:47
  • 5067

ie浏览器对border-radius属性的支持小结

1. ie10,ie9支持border-radius属性 2.ie10兼容性视图,ie8,ie7,ie6,不支持border-radius属性 对于不支持圆角属性的ie浏览器,可以通过引入...
  • u013334660
  • u013334660
  • 2014年01月04日 09:45
  • 5125

CSS3的border-radius属性详解

border-radius: border-radius: none | 一个值 | 两个值 | 三个值 | 四个值 其中每一个值可以为 数值或百分比的形式。 length/length 第一个...
  • liuyan19891230
  • liuyan19891230
  • 2016年02月23日 17:15
  • 29625

border-radius:50%和100%究竟有什么区别

border-radius:50%和100%究竟有什么区别
  • NtosKiking
  • NtosKiking
  • 2016年03月23日 10:14
  • 5833
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:border-radius参数详解
举报原因:
原因补充:

(最多只允许输入30个字)