border-radius制作半圆与制作圆形的方法是一样的，只是元素的宽度与圆角方位要配合一致，不同的宽度和高度比例，以及圆角方位，可以制作上半圆、下半圆、左半圆和右半圆效果。例如：
.semicircle {
margin: 30px;
}
.top {
width: 100px;/*宽度为高度的2倍*/
height: 50px;
border-radius: 50px 50px 0 0;/*圆角半径为高度的值*/
}
.right {
height: 100px;/*高度为宽度的2倍*/
width: 50px;
border-radius: 0 50px 50px 0;/*圆角半径为宽度的值*/
}
.bottom {
width: 100px;/*宽度为高度的2倍*/
height: 50px;
border-radius: 0 0 50px 50px;/*圆角半径为高度的值*/
}
.left {
width: 50px;
height: 100px;/*高度为宽度的2倍*/
border-radius: 50px 0 0 50px;/*圆角半径为宽度的值*/
}
效果如图3-35所示。
border-radius制作半圆有两个小技巧：
制作上半圆或下半圆，元素的宽度值是高度值的2倍，而且圆角半径值为元素的高度值；
制作左半圆或右半圆，元素的高度值是宽度值的2倍，而且圆角半径值为元素的宽度值。
立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
750
