制作盒子div四个角的形状

最新推荐文章于 2024-07-05 16:21:05 发布

小薯片子

最新推荐文章于 2024-07-05 16:21:05 发布

阅读量1k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/luobo2345/article/details/78526480

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>