CSS隐藏的威力

CSS隐藏的威力如何使用 border radius 属性下面是 border radius 属性最基本的使用方法

欢迎大家来到IT世界,在知识的湖畔探索吧!

如何使用border-radius属性

下面是border-radius属性最基本的使用方法。

1

2

3

4

5

6

.round {

border-radius: 5px; /* 所有角都使用半径为5px的圆角,此属性为CSS3标准属性 */

-moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */

-webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */

border-radius: 5px4px3px2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */

}

1.用border-radius画圆

实心圆

CSS隐藏的威力
欢迎大家来到IT世界,在知识的湖畔探索吧!

如图,是用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#a72525solid;

-webkit-border-radius: 100px;

}

虚线圆

CSS隐藏的威力

1

2

3

4

5

6

7

#circle{

width: 200px;

height: 200px;

background-color: #efefef; /* Can be set to transparent */

border: 3px#a72525dashed;

-webkit-border-radius: 100px100px100px100px;

}

2.半圆和四分之一圆

半圆

CSS隐藏的威力

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

代码如下:

1

2

3

4

5

6

#quartercircle {

width: 200px;

height: 200px;

background-color: #a72525;

-webkit-border-radius: 200px000;

}

四分之一圆

CSS隐藏的威力

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

本例代码如下:

更多玩法

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

CSS隐藏的威力

虚线的半圆和四分之一圆。

CSS隐藏的威力

配合position属性做一个月亮。

CSS隐藏的威力

配合position、RGBa和z-index这些属性做一个本文开头的色彩维恩图。

CSS隐藏的威力

想认识志同道合的朋友一起学习web

加入我们的学习

丰富的学习资源,周一到周四免费直播公开课

长按图片,识别二维码即可入群

CSS隐藏的威力

你可能感兴趣的精彩内容

微信:UI设计自学平台加关注

长按关注:《UI设计自学平台》

↓↓↓

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/105507.html

(0)
上一篇 1小时前
下一篇 1小时前

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信