Heim > Artikel > Web-Frontend > So erzielen Sie abgerundete Ecken und einen konkaven Effekt in CSS
So erzielen Sie abgerundete Ecken und einen konkaven Effekt in CSS
- 王林nach vorne
- 2020-07-14 17:05:434860Durchsuche
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!
Stellungnahme：
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：2021 CSS-Sammlung häufig verwendeter CodesNächster Artikel：2021 CSS-Sammlung häufig verwendeter Codes