Maison > Article > interface Web > Comment obtenir des coins arrondis et un effet concave en CSS
Comment obtenir des coins arrondis et un effet concave en CSS
- 王林avant
- 2020-07-14 17:05:434844parcourir
Idée d'implémentation :
(Tutoriel recommandé : Démarrage rapide CSS)
Deux divs côte à côte, dans le second Définissez un div nommé élément avec 2 fois la largeur et la hauteur, définissez border-radius : 50 % pour l'élément, puis positionnez-le de manière absolue.
Implémentation du code :
<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> Effet de l'implémentation :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Collection de codes CSS 2021 couramment utilisésArticle suivant：Collection de codes CSS 2021 couramment utilisés