CSS 圆角边框

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;height: 200px;
                line-height: 200px;text-align: center;
                background: #00ff00;
                border: 4px #ff0000 solid;
                /* border-top-left-radius: 20px 30px;
                border-top-left-radius: 20% 30%; */
                /* border-top-left-radius: 50%;
                border-top-right-radius: 50%;
                border-bottom-left-radius: 50%;
                border-bottom-right-radius: 50%; */
                /* border-radius: 10px 20px 30px 40px; */ /* 语法2 */
                /* border-radius: 10px 20px 30px; */ /* 语法3 */
                /* border-radius: 10px 30px; */ /* 语法4 */
                /* border-radius: 20px; */ /* 语法5 */
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <!-- 
        圆角边框两大要素：
            圆角方向：垂直和水平方向可以表示一个角
                先垂直方向再水平
                方向1：上下
                方向2：左右
            圆角半径：
                需要水平半径和垂直半径
                
        圆角边框设置：
            语法1：border-垂直方向-水平方向-radius: 水平半径 垂直半径;
                垂直方向：上top、下bottom
                水平方向：左left、右right
                水平和垂直半径：
                    单位：
                        px
                        em
                        rem
                        %：元素宽度和高度的百分比
                    水平和垂直半径设置一个值，则两个半径相同，都是设置的值
            语法2：border-radius: 上左角 上右角 下右角 下左角;
            语法3：border-radius: 上左角 上右角和下左角 下右角;
            语法4：border-radius: 上左角和下右角 上右角和下左角;
            语法5：border-radius: 四个角一个值;
         -->
         <div>我要自学</div>
    </body>
</html>

CSS 圆角边框