<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
div { width: 200px; height: 200px; border: 1px solid red; /* Set the box border to 1 pixel bold red*/ } div:first-child { /*Structural pseudo-class selector selects siblings*/ border-radius: 10px; /*A value means that the four corners have the same 10px radian */ } div:nth-child(2){ border-radius: 100px; border-radius: 100px; /* half of the width and height is a circle or border-radius: 50%;*/ } div : nth-child( 3) { border-radius: 10px 40px;/*The upper left and lower right corners are 10 The upper right and lower left corners are 40*/
}
div:nth-child(4) { border-radius: 10px 40px 80px; /*The upper left corner is 10, the upper right and lower left corners are 40, the lower right corner is 80*/ } div : nth-child(5) { border-radius : 10px 40px 80px 100px; /*upper left, upper right, lower right, lower left, clockwise*/ } div:nth-child(6) { border-radius: 100px; /*capsule shape*/ height: 100px; } div: nth-child(7) { /*lemon*/ border-radius: 100px 0; } </style> </head> <body> <div></div> <div></div> <div></ div> <div></div> <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Make the shape of the four corners of the box div
Guess you like
Origin blog.csdn.net/luobo2345/article/details/78526480
Recommended
Ranking