CSS3:border-radius隐藏的威力

转载 2016年08月29日 17:30:47
.round {
	border-radius: 5px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */
	-moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */
	-webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */

	border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
}

1.用border-radius画圆

实心圆

CSS3圆

如图,是用border-radius属性画出来的一个完美的实心圆。画实心圆的方法是高度和宽度相等,并且把border的宽度设为高度和宽度的一半。代码如下。

1
2
3
4
5
6
#circle {
	width: 200px;
	height: 200px;
	background-color: #a72525;
	-webkit-border-radius: 100px;
}

空心圆

CSS3空心圆

通过border-radius属性画空心圆和画实心圆的方法差不多,只是border的宽度只能小于高度和宽度的一半。代码如下。

1
2
3
4
5
6
7
#circle {
	width: 200px;
	height: 200px;
	background-color: #efefef; /* Can be set to transparent */
      	border: 3px #a72525 solid;
	-webkit-border-radius: 100px;
}

虚线圆

CSS3虚线圆

1
2
3
4
5
6
7
#circle {
	width: 200px;
	height: 200px;
	background-color: #efefef; /* Can be set to transparent */
      	border: 3px #a72525 dashed;
	-webkit-border-radius: 100px 100px 100px 100px;
}

2.半圆和四分之一圆

半圆

CSS3半圆

以本例来讲,半圆的画法是把宽度设为高度的一半,并且也只设置左上角和左下角的半径。代码如下。

1
2
3
4
5
6
#quartercircle {
	width: 200px;
	height: 200px;
	background-color: #a72525;
	-webkit-border-radius: 200px 0 0 0;
}

四分之一圆

CSS3四分之一圆

四分之一圆的实现方法是把高度和宽度设置为相等,只设置一个圆角,其半径等于高度或宽度。本例代码如下。

1
2
3
4
5
6
#quartercircle {
	width: 200px;
	height: 200px;
	background-color: #a72525;
	-webkit-border-radius: 200px 0 0 0;
}

更多玩法

看了这么多实例后,你完全可以自己创造更多玩法,如:

semiquarter.jpg


相关文章推荐

CSS3:border-radius隐藏的威力

这篇文章将简述使用CSS3的border-radius来画圆、半圆和四分之一圆,并如何利用它们。 如何使用border-radius属性 下面是border-radius属性最基本的使用方...

CSS3 border-radius的威力

这篇文章将简述使用CSS3的border-radius来画圆、半圆和四分之一圆,并如何利用它们。如何使用border-radius属性下面是border-radius属性最基本的使用方法。.round...

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

点评:border-radius:用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。 -webkit-border-radi...
  • aerchi
  • aerchi
  • 2012年03月31日 13:10
  • 3283

css3:border-radius圆角边框详解

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

CSS3笔记:Border-radius的形成原理

参考文章:http://www.zhangxinxu.com/wordpress/2015/11/css3-border-radius-tips/ 一.前言 最近自己写了一个导航栏,马马虎虎就是啧个样...

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

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

CSS3 圆角(border-radius)

值:半径的长度 前缀: -moz(例如 -moz-border-radius)用于Firefox -webkit(例如:-webkit-border-radius)用于Safari和Chrome。 ...

CSS3 border-radius属性

border-radius属性:该属性能够实现圆角边框的效果,可以用来画圆、半圆或者椭圆。可以使用px、em等单位,或者使用百分比,后面可以有4个参数,可以用来设置4个边框的radius值。borde...

CSS3属性之一:border-radius

CSS3属性之一:border-radius 语法: border-radius : none | {1,4} [ / {1,4} ]? 相关属性: bord...
  • EthanQ
  • EthanQ
  • 2012年01月28日 10:50
  • 1212
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3:border-radius隐藏的威力
举报原因:
原因补充:

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