css實現半圓效果的方法：1.通過“border-radius”屬性設置邊框的4個角實現半圓效果，需要在css中添加樣式代碼，比如語法樣式為：“border-radius: 100px 100px 0 0;”設置邊框左上角為100px、右上角為100px、右下角為0px、左下角為0px來實現半圓即可。
具體實現方法如下：
1、半圓
半圓分為：上半圓、下半圓、左半圓、右半圓，我們只要學會制作某一個方向的半圓，其他方向的半圓都可以輕松實現，其原理都一樣。
假如我們要制作上半圓，實現原理：把高度height設置為寬度width的一半，并且左上角和右上角的圓角半徑定義為元素的高度一致，而右下角和左下角的圓角半徑定義為0.
而右下角和左下角的圓角半徑定義為0.
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>半圓角</title>
<style type="text/css">
div{
width: 100px;
height: 50px;
border:1px solid black;
background-color: blue;
border-radius: 100px 100px 0 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
結果：
2、圓
實現方式：寬度、高度設置為一樣，然后四角圓角半徑設置為寬度、高度的一半
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>圓</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border:1px solid black;
background-color: red;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
結果：
