Implementierungsidee:
(Empfohlenes Tutorial: CSS-Schnellstart)
Zwei Divs nebeneinander, im zweiten Definieren Sie ein Div-Namenselement mit der doppelten Breite und Höhe, legen Sie den Randradius: 50 % für das Element fest und positionieren Sie es dann absolut.
Code-Implementierung:
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
.box {
width: 50px;
height: 50px;
overflow: hidden;
background: #655;
text-align: center;
position: relative;
float: left;
}
.item {
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
position: absolute;
top: -50px;
left: 0;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>Implementierungseffekt:
Das obige ist der detaillierte Inhalt vonSo erzielen Sie abgerundete Ecken und einen konkaven Effekt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
