话说,大家都知道如何使用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. 半圆
半圆
如图上,上半圆只是把一个宽高比为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. 四分之一圆
四分之一圆
如图上,左上四分之一圆只是把一个正方形,设置左上角的圆角,圆弧半径等于变长,即可。
代码如下:
HTML
CSS
.quarter-circle-top-left{
width:50px;
height:50px;
border-top-left-radius:50px;
background:#f00;
}
练习:如何做左下四分之一圆、右上四分之一圆与右下四分之一圆?
4. 四分之三圆
四分之三圆
如图上,上面会做的童鞋,看到这个图形觉得很难,其实只是一个上半圆与左下四分之三圆组合而成。思考方式决定解决方式。
代码如下:
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;
}
练习:如何其他三种的四分之三圆吧?提示要用到浮动的喔
其他
圆头
如图上,是否觉得这个图不可能做到呢?这里需要使用一个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