©2020-2024 ioDraw All rights reserved
<>1.右半圆
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
div{ background-color: aqua; } .circle{ width: 50px; height: 100px;
border-radius: 0 50px 50px 0; line-height: 100px; } </style> </head> <body>
<h3>这是一个右半圆</h3> <div class="circle"></div> </body> </html>
实现效果：
2.左半圆
<html> <head> <meta charset="utf-8"> <title></title> <style> div{
background-color: aqua; } .circle{ width: 50px; height: 100px; border-radius:
50px 0 0 50px; line-height: 100px; } </style> </head> <body> <h3>这是一个左半圆</h3>
<div class="circle"></div> </body> </html>
实现效果：
<>3.上半圆
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
div{ background-color: aqua; } .circle{ width: 100px; height: 50px;
border-radius: 50px 50px 0 0; line-height: 50px; } </style> </head> <body>
<h3>这是一个上半圆</h3> <div class="circle"></div> </body> </html>
实现效果：
<>4.下半圆
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
div{ background-color: aqua; } .circle{ width: 100px; height: 50px;
border-radius:0 0 50px 50px ; line-height: 50px; } </style> </head> <body>
<h3>这是一个下半圆</h3> <div class="circle"></div> </body> </html>
实现效果：
<>5.其他方法！！！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
div{ background-color: aqua; } .circle{ position:absolute; /*clip
属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。 */ width: 100px; height: 100px;
border-radius: 50px; clip: rect(0px 50px 100px 0px); /*唯一合法的形状值是：rect (top,
right, bottom, left)*/ } .circle{ position:absolute; /*clip 属性剪裁绝对定位元素。也就是说，只有
position:absolute 的时候才是生效的。 */ width: 100px; height: 100px; border-radius:
50px; clip: rect(0px 50px 100px 0px); /*唯一合法的形状值是：rect (top, right, bottom,
left)*/ } </style> </head> <body> <div style="position: relative;"> <div
class="circle"></div> </div> </body> </html>
实现效果：