<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div{
height: 200px;
width: 200px;
background-color: blue;
border-radius:50px 0 50px 0;
background-size: 200px 200px;
background-image: url("../ws1/img/cat.jpg");
}
#div1{
height: 400px;
width: 400px;
background-color: antiquewhite;
border-radius:200px;
margin-top: 100px;
overflow: hidden;
}
#div2{
height: 200px;
width: 200px;
background-color: orange;
border-radius:100px;
margin: 0 auto;
margin-top: 100px;
}
</style>
<title>盒子弧度</title>
</head>
<body>
<div id="div">
</div>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div{
height: 200px;
width: 200px;
background-color: blue;
border-radius:50px 0 50px 0;
background-size: 200px 200px;
background-image: url("../ws1/img/cat.jpg");
}
#div1{
height: 400px;
width: 400px;
background-color: antiquewhite;
border-radius:200px;
margin-top: 100px;
overflow: hidden;
}
#div2{
height: 200px;
width: 200px;
background-color: orange;
border-radius:100px;
margin: 0 auto;
margin-top: 100px;
}
</style>
<title>盒子弧度</title>
</head>
<body>
<div id="div">
</div>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>