3.2 (案例)CSS3边框阴影—border-radius

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            margin: 10px auto;
            width: 200px;
            height: 200px;
            background: red;
            border-radius: 100px;
        }

        .box2{
            margin: 10px auto;
            width: 200px;
            height: 200px;
            background: red;
            border-radius: 50px 100px;
        }

        .box3{
            margin: 10px auto;
            width: 200px;
            height: 200px;
            background: red;
            border-radius: 50px 100px 70px;
        }

        .box4{
            margin: 10px auto;
            width: 200px;
            height: 200px;
            background: red;
            border-radius:50px 70px 80px 100px;
        }

        .box5{
            width: 200px;
            height: 200px;
            background: red;
            margin: 10px auto;
            border-radius:50px/100px;
        }

        .box6{
            width: 200px;
            height: 200px;
            background: red;
            margin: 10px auto;
            border-radius:50px 60px 80px 90px/100px 50px;
        }

        .box7{
            width: 200px;
            height: 200px;
            background: red;
            margin: 10px auto;
            border-top-left-radius:50px 100px;
        }
        .box8{
            margin: 10px auto;
            width: 0;
            height:0;
            border-width: 100px;
            border-left-color: red;
            border-top-color: #0f0;
            border-right-color: transparent;
            border-bottom-color: yellow;
            border-style: solid;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    border-radius可设置4个值，先来看看设置1个值的样子
    <div class="box1"></div>

    <!-- border-radius可设置2个值, 与margin,padding类似上右下左 -->
    <!-- 左上和右下50px,右上和左下100px -->
    <div class="box2"></div>

    <!-- border-radius设置3个值 -->
    <!-- 左上50px,右上左下100px,右下70px -->
    <div class="box3"></div>

    <!-- border-radius设置4个值 -->
    <!-- 左上50px,右上70px,右下80px,左下100px -->
    <div class="box4"></div>

    <!-- border-radius还可利用/设置第二组值 -->
    <!-- 第一组值表示水平半径，第二组值表示垂直半径 -->
    <!-- 水平半径：左上,右上,右下,左下50px -->
    <!-- 垂直半径: 左上,右上,右下,左下100px-->
    <div class="box5"></div>

    <!-- 自己看吧。 -->
    <div class="box6"></div>

    <!-- border-radius还可对4个角单独设置 -->
     <!--border-top-left-radius
　　border-top-right-radius
　　border-bottom-right-radius
　　border-bottom-left-radius -->
    <!-- 这四个属性可设置1到2个值，代表水平半径和垂直半径。 -->
    <!-- 左上水平半径50px,垂直半径100px -->
    <div class="box7"></div>
    <div class="box8"></div>
</body>
</html>