CSS3属性之圆角效果——border-radius属性

在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/)。实现过程很繁琐,但CSS3的到来简化了实现圆角的方式。

CSS3实现圆角需要使用border-radius属性,但因为浏览器兼容性的问题,在开发过程中要加私有前缀。


1

2

3

4

-webkit-border-radius

-moz-border-radius

-ms-border-radius

-o-border-radius

 border-radius属性其实可以分为四个其他的属性:


1

2

3

4

5

border-radius-top-left         /*左上角*/

border-radius-top-right       /*右上角*/

border-radius-bottom-right /*右下角*/

border-radius-bottom-left   /*左下角*/

//提示:按顺时针方式

下面用几个实例来展示border-radius的具体用法。

1、border-radius单个属性值:


1

2

//HTML清单

<div class="roundedCorner">


1

2

3

4

5

6

.roundedCorner{

    width:100px;

    height:100px;

    background-color:#f90;

    border-radius:10px;//左上,右上,右下,坐下都是10px

}

效果:

  

2、border-radius是个属性值方式:


1

2

3

4

5

6

7

<div class="roundedCorner2"></div><br/><br/><br/>//HTML清单

.roundedCorner2{

    width:100px;

    height:100px;

    background-color:#f99;

    border-radius:20px 10px 5px 2px;

}

 效果:

 

不过在开发的过程中(我的工作中),经常用到的是border-radius单属性值,设置4个不同圆角的情况很少。

border-radius的优势不仅仅在制作圆角的边框,还是利用border-radius属性来画圆和半圆。

1、制作半圆的方法:

元素的高度是宽度的一半,左上角和右上角的半径元素的高度一致(大于高度也是可以的,至少为height值)。


1

2

3

4

5

6

7

<div class="semi-circle"></div>

.semi-circle{

    width:100px;

    height:50px;//高度是宽度的一半

    background-color:#000;

    border-radius:50px 50px 0 0;//左上和右上至少为height值

}

效果: 

 

知道了如何画上半圆,就会举一反三画其他方向的圆了,这里不再赘述。

2、画实心圆的方法:

宽度和高度一致(正方形),然后四个角设置为高度或者宽度的1/2.


1

2

3

4

5

6

7

<div class="circle"></div>

.circle{

    width:100px;

    height:100px;

    background-color:#cb18f8;

    border-radius:50px;

}

效果:

  

总结:

CSS3实现圆角的方式既优雅又方便,但是兼容性不够好,如果需要考虑旧版本的浏览器的话,可以考虑优雅降级的方式。开始提到的两种方式的优点是兼容性好,但不够优雅。

使用哪种方式,看具体的项目需求吧。

时间: 2024-11-03 01:34:18

CSS3属性之圆角效果——border-radius属性的相关文章

使用box-shadow属性实现圆角效果代码实例

使用box-shadow属性实现圆角效果代码实例:通常实现圆角效果我们使用border-radius,其实我们也可以使用box-shadow属性来实现.两个属性的具体用法这里就不多介绍了,具体可以参阅以下两个文章:(1).圆角效果可以参阅CSS3实现圆角效果一章节.(2).box-shadow可以参阅CSS3的box-shadow属性用法详解一章节.代码实例: <!DOCTYPE html> <html> <head> <meta charset=" u

纯CSS3制作的圆角效果按钮菜单

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS3制作的圆角效果按钮菜单丨曲阳雕塑</title> <style type="text/css"> nav{display: block; width: 100%; ov

ss3来实现边框圆角效果

经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然border-radius要在firefox或Safari 和 Chrome才能实现 W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性:border-radius,Firefox 和 Safari 也通过私有属性实现了该功能: 1 <div style=" border-top-left-ra

IOS_视图实现圆角效果的三种方法及比较

通过代码,至少有三种方法可以为视图加上圆角效果.附例子:https://github.com/weipin/RoundedCorner 方法一.layer.cornerRadius 第一种方法最简单,通过层对象的cornerRadius属性实现圆角效果,代码如下: view.layer.cornerRadius = 8.0;view.layer.masksToBounds = YES; 缺点是会有2次rending passes.首先off-screen画出带圆角的图,然后在视图上画第二次. 方

CSS3.0圆角属性实现圆角

圆角属性简介: 1.属性值:表示圆角半径,可以使用长度单位px,或百分比 2.简写属性:border-radius 3.分量属性:border-top-left-radius(上左).border-top-right-radius(上右) border-bottom-right-radius(下右). border-bottom-left-radius(下左) 圆角简写属性值的设置(与margin属性设置相同,顺时针方向): 1.1个属性值:4个角半径相同 2.2个属性值:第一个值:上左角.下右

CSS3边框属性_圆角、CSS画基本图形(圆形、三角形、多边形、爱心、八卦等)

有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,用的是firefox或者chrome,当然IE也能看一部分 1.正方形 div{ background:#F00; width:100px; height:100px; } 2.长方形 div{ background:#F00; width:200px; height:100px; } 3.圆形 div{ width: 100px; height: 100px; background: red; -moz-border-radius: 5

小tip: CSS3如何实现圆角的outline效果?

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4765 一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:"页面可用性之outline轮廓外框的一些研究",还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价值的东西:"纯CSS实现的outline切换transition动画效果". 个把星

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力) 来源:互联网 作者:佚名 时间:03-28 14:17:14 [大 中 小] border-radius:用这个属性能实现圆角边框的效果.现在只有Mozilla/Firefox 和 Safari 3支持该属性. -webkit-border-radius:苹果:谷歌,等一些浏览器认,因为他们都用的是webkit内核: -moz-border-radius:moz这个属性 主要是专门支持M

CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影

圆角边框: border-radius    一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于可以快捷地设置圆角,而且通过这个属性我们还可以做出圆.半圆.四分一圆.椭圆等图形. 常用的圆角效果: div{border-radius: 15px;} 两个值时,分别指水平方向的半径和垂直方向的半径,用/号隔开,如: div{border-radius:5px 3px 4px 2px/1px 2p