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属性最基本的使用方...
  • asia_one
  • asia_one
  • 2014年03月06日 13:44
  • 1124

CSS3 border-radius的威力

这篇文章将简述使用CSS3的border-radius来画圆、半圆和四分之一圆,并如何利用它们。如何使用border-radius属性下面是border-radius属性最基本的使用方法。.round...
  • lin74love
  • lin74love
  • 2017年03月17日 21:48
  • 101

CSS3中border-radius隐藏的威力

.round { border-radius: 5px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */ -moz-border-radius: 5px; /* Mozilla浏...
  • ekinwei
  • ekinwei
  • 2010年05月27日 13:13
  • 381

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

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

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

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

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

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

用CSS3的圆角border-radius属性,画一个圆形

习惯了方方框框,我们会使用圆角技术使网页变得很圆润,而不是一个个棱角。圆角被广泛运用于网页中,比如把边框加个圆角,这是最流行的用法,让网页看起来很舒服。还有就是用户的头像,把它做成一个圆形的,看到现在...
  • ITX2000
  • ITX2000
  • 2014年08月20日 11:33
  • 7378

CSS3 border-radius实现边框圆角

border-radius实现边框圆角   这是css3的属性 border-radius:3px; -webkit-border-radius:3px; -moz-border-radius...
  • wangnanwlw
  • wangnanwlw
  • 2016年08月09日 14:48
  • 882

使用border-radius绘制椭圆

border-radius总共接受8个值,前4个为水平方向上的值,后4个为垂直方向; border-radius: 50px 50px 50px 50px/25px 25px 25px 25px...
  • yuzhitangxiangrong
  • yuzhitangxiangrong
  • 2017年05月15日 22:53
  • 225

关于css3中文字超出隐藏

一、中文超出了会默认换行,但是对于英文或者数字来说超出不换行,要加上word-wrap: break-word; word-break: break-all;二、文字超出...表示display: b...
  • kuangshp128
  • kuangshp128
  • 2017年06月05日 17:43
  • 1103
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3:border-radius隐藏的威力
举报原因:
原因补充:

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