css3圆角矩形

        div{
            width: 200px;
            height: 200px;
            border: #f00 solid 1px;
            margin-bottom: 10px;
        }

 1、设置 border-radius: 20px;

        div:first-of-type{
            border-radius: 20px;
        }

  2、设置 border-radius: 20px 40px;

        div:nth-of-type(2){
            border-radius: 20px 40px;
        }

  3、设置 border-radius: 20px 40px;

        div:nth-of-type(3){
            border-radius: 20px 40px 60px;/*上-左右-下*/
        }

  4、设置 border-radius: 20px 40px 60px 80px;

        div:nth-of-type(4){
            border-radius: 20px 40px 60px 80px;/*上-右-下-左*/
        }

  5、设置扇形

        div:nth-of-type(5){
            border-radius: 0px 0px 200px;
        }

  6、设置圆形

        div:nth-of-type(6){
            border-radius: 100px;
        }
        div:nth-of-type(7){
            border-radius: 50%;
        }

 推荐使用border-radius: 50%;

猜你喜欢

转载自www.cnblogs.com/qingyang-0-0/p/9395171.html
今日推荐