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属性不仅能够创建圆角,还可以...

从css3书写顺序引出来的border-radius参数

当时写这篇文章主要是想探讨一下优雅降级和渐进增强的区别,按照正常的逻辑思维,不管是降级还是增强,应该对于效果是没什么区别的,因为后者会覆盖前者,关于CSS3属性的书写顺序,标准的css3属性和带web...

css3:border-radius圆角边框详解

前言 今天来聊聊这个 border-radius 属性,radius的英文意思是弧度的意思,而国人更喜欢称之为圆角,因为它可以使得我们的边框有棱有角。当年前辈们都是用图片君搞定圆角的年代或用一条...

border-radius属性详解

一、 应用场景border-radius属性的应用,大家最熟悉的应该就是头像了,但其实,border-radius属性还是很强大的,你能相信,下面两个图形都是用border-radius画出来的么? ...

CSS3 经典教程系列:CSS3 圆角(border-radius)详解

现在有了 CSS3 的 border-radius 特性之后,实现边框圆角效果就非常简单了,而且其还有多个优点:一是减少网站维护工作量;二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载...

Jquery学习笔记(2):CSS3圆角详解:border-radius

摘要: 传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:...

CSS3 经典教程系列:CSS3 圆角(border-radius)详解

《CSS3 入门教程系列》前一篇文章详细介绍了 CSS3 RGBA 特性的用法,今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法。   以前制...

CSS3圆角详解:border-radius

一、CSS3圆角的优点   传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:   * 减少维护的工作量。图...

css3(border-radius)边框圆角详解

border-top-left-radius: 50px 100px;//第一个值表示水平半径,第二个值表示垂直半径。border-radius: 100px 25px 80px 5px / 45px...

CSS3 圆角(border-radius)详解

现在有了 CSS3 的 border-radius 特性之后,实现边框圆角效果就非常简单了,而且其还有多个优点:一是减少网站维护工作量;二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:border-radius参数详解
举报原因:
原因补充:

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