<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
div {
width: 200px;
height: 200px;
border: 1px solid red; /* 设置盒子边框1像素 加粗 红色*/
}
div:first-child { /*结构伪类选择器 选亲兄弟 */
border-radius: 10px; /*一个数值表示四个角相同10px弧度*/
}
div:nth-child(2){
border-radius: 100px;
border-radius: 100px; /*取宽高的一半 是圆 or border-radius: 50%;*/
}
div:nth-child(3) {
border-radius: 10px 40px; /*左上角和右下角是10 右上角和左下角是40*/
}
div:nth-child(4) {
border-radius: 10px 40px 80px; /*左上角是10 右上角和左下角是40 右下角是80*/
}
div:nth-child(5) {
border-radius: 10px 40px 80px 100px; /*左上，右上，右下，左下，顺时针*/
}
div:nth-child(6) {
border-radius: 100px; /*胶囊形状*/
height: 100px;
}
div:nth-child(7) { /*柠檬*/
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>
制作盒子div四个角的形状
猜你喜欢
转载自blog.csdn.net/luobo2345/article/details/78526480
今日推荐
周排行