给矩形添加圆角

<style>
        div{

            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 0 auto;
            /* 圆角效果大小 */
            /* 四个角一样 */
            border-radius: 10px;
            /* 左上右下两个角10px，左下右上为5px */
            border-radius: 10px 5px;
            /* 左上两个角10px，左下右上为5px，右下为20px */
            border-radius: 10px 5px 20px;
            /* 左上两个角10px，左下15px，右上为5px，右下为20px */
            border-radius: 10px 15px 5px 20px;
            /* 单独设置左上角 */
            border-top-left-radius: 10px;
            /* 单独设置右上角 */
            border-top-right-radius: 10px;
             /* 单独设置左下角 */
             border-bottom-left-radius: 10px;
            /* 单独设置右下角 */
            border-bottom-right-radius: 10px;
            /* 在水平方向上的弧度长30px，垂直方向上60px */
            border-radius: 30px/60px;
            border-radius: 10px 5px/20px 10px;
            border-radius: 10px 15px 5px 20px/50px 40px 30px 20px;

        }
    style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31