使用html制作圆弧正方形,CSS3圆角效果:从圆出发

使用html制作圆弧正方形,CSS3圆角效果:从圆出发话说,大家都知道如何使用CSS3画一个圆,那么有好多同学可能不知道,CSS3可以画半圆、四分之一圆以及四分之三圆

话说,大家都知道如何使用CSS3画一个圆,那么有好多同学可能不知道,CSS3可以画半圆、四分之一圆以及四分之三圆。下面我们一起看一下如何实现吧!

技术点: CSS3圆角border-radius

1. 基本原理

通常,我们使用border-radius设置盒子四个圆角,其实,这四个圆角各自有单独的属性,可以单独设置的。如下表所示:

|No.|属性|作用|

|:-:|

|1|border-top-left-radius|左上角|

|2|border-top-right-radius|左下角|

|3|border-bottom-left-radius|右上角|

|4|border-bottom-right-radius|右下角|

我们使用的border-radius只是一个简写。这个简写与padding margin简写一样,有四种写法。

|No.|属性|作用|

|:-:|

|1|border-radius:半径;|四个角圆弧半径|

|2|border-radius:半径1 半径2;|左上和右下圆弧半径为半径1;左下和右上圆弧半径为半径2|

|3|border-radius:半径1 半径2 半径3;|左上圆弧半径为半径1;左下和右上圆弧半径为半径2;右下圆弧半径为半径3|

|4|border-radius:半径1 半径2 半径3 半径4;|左上圆弧半径为半径1;左下圆弧半径为半径2;右下圆弧半径为半径3;右上圆弧半径为半径4|

2. 半圆

57513d8ff3564a8f7fa4d801ea70d125.png

半圆

如图上,上半圆只是把一个宽高比为2:1的矩形,只设置左上与右上角的圆角,圆弧半径等于矩形高度,即可。

代码如下:

HTML

CSS

.half-circle-top{

width:100px;

height:50px;

border-top-left-radius:50px;

border-top-right-radius:50px 50px;

background:#f00;

}

练习:如何做下半圆、左半圆与右半圆?

3. 四分之一圆

5b3b6e182bd8bd0cce9351b9ad920a59.png

四分之一圆

如图上,左上四分之一圆只是把一个正方形,设置左上角的圆角,圆弧半径等于变长,即可。

代码如下:

HTML

CSS

.quarter-circle-top-left{

width:50px;

height:50px;

border-top-left-radius:50px;

background:#f00;

}

练习:如何做左下四分之一圆、右上四分之一圆与右下四分之一圆?

4. 四分之三圆

0c1370a963247c25748c38c94c091b61.png

四分之三圆

如图上,上面会做的童鞋,看到这个图形觉得很难,其实只是一个上半圆与左下四分之三圆组合而成。思考方式决定解决方式。

代码如下:

HTML

CSS

.half-circle-top{

width:100px;

height:50px;

border-top-left-radius:50px;

border-top-right-radius:50px 50px;

background:#f00;

}

.quarter-circle-bottom-left{

width:50px;

height:50px;

border-bottom-left-radius:50px;

background:#f00;

}

练习:如何其他三种的四分之三圆吧?提示要用到浮动的喔

其他

c7bb6206a12dec6627bb58f905b1dcea.png

圆头

如图上,是否觉得这个图不可能做到呢?这里需要使用一个CSS3转换(变形)属性transform,属性值中rotateZ函数表示以垂直电脑屏幕的Z轴为轴线旋转,参数-45deg是旋转角度,正值是瞬时值,负值是逆时针;deg是角度单位。

代码如下:

HTML

CSS

.round{

width:100px;

transform:rotateZ(-45deg);

}

.half-circle-top{

width:100px;

height:50px;

border-top-left-radius:50px;

border-top-right-radius:50px 50px;

background:#f00;

}

.quarter-circle-bottom-left{

width:50px;

height:50px;

border-bottom-left-radius:50px;

background:#f00;

}

以上,CSS3圆角的基本用法完成,其他用法敬请期待。

可参考CSS3制作各种形状图像,制作各种图形。

今天的文章使用html制作圆弧正方形,CSS3圆角效果:从圆出发分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/68673.html

(0)
编程小号编程小号

相关推荐

发表回复

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