css怎么做半圆

html-css017

css怎么做半圆,第1张

<div style="border:1px solid #e6e6e6width:50pxheight:25pxborder-top-right-radius: 25pxborder-top-left-radius: 25pxborder-bottom:0">

</div>

请参考:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

/*画整个圆*/

.round1{

position: absolute

top: -50px

width: 100px

height: 100px

background-color: pink

border-radius: 50%

}

.mask2{

position: relative

width: 100px

height: 100px

overflow: hidden

}

.round2{

position: absolute

top: 50px

width: 100px

height: 100px

background-color: cornflowerblue

border-radius: 50px

}

</style>

</head>

<body>

<div class="round1"></div>

<div class="mask2">

<div class="round2"></div>

</div>

</body>

</html>