详解：22 border-radius

核心：记住，如果只写一个的话，代表四个角都变化
记住：如果写两个的话。代表左上角与右下角一样，右上角与左下角一样
记住：如果三个值的话，代表左上角右上角左下角
如果四个值的话，代表顺时针，从左上角----右上角—右下角—左下角
记住：border-top-left-radius: 80px 40px;这样的，都是上下然后左右的写的时候勒，80px是水平，然后是40px垂直

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        #container div
        {
            width: 100px;
            height: 100px;
            border: 3px solid red;
            background-color: red;
            margin: 10px;
        }
        .box1
        {
            border-radius: none;
        }
        .box2
        {
            border-radius: 10px;
        }
        .box3
        {
            border-radius: 20px 40px;/*如果两个的话。是左上角---右下角,然后是右上角----左下角*/
        }``
        .box4
        {
            border-radius:  10px 20px 30px;/*左上角--然后是右上角---左下角，然后是右下角*/
        }
        .box5
        {
            border-radius: 10px 20px 30px 40px;/*顺时针把，从左上角开始把*/
        }
        .box6
        {
            border-top-left-radius: 80px 40px;/*先以上下开始然后第三个是左右把*/
        }/*水平 垂直*/
    </style>
</head>
<body>
    <div id="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box7"></div>
        <div class="box8"></div>
        <div class="box9"></div>
    </div>
</body>
</html>

贵哥的编程之路

原创文章 107 获赞 14 访问量 1354

关注私信

详解：22 border-radius

猜你喜欢