CSS3圆角

border-radius属性

border-radius属性是一个简写属性，用于设置border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius，其顺序也是如此。

也可以设置border-radius: 1-4 length|% / 1-4 length|%;或border-radius:length|%。

    <style>
        .div1{
            width:300px;
            height:300px;
            background-color:red;
            margin:0 auto;
            border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
        }
        .div2{
            width:300px;
            height:300px;
            background-color:red;
            margin:0 auto;
            border-radius:50% / 35%;
        }
    </style>
    <div class="div1"></div>
    <div class="div2"></div>

box-shadow属性

box-shadow: h-shadow v-shadow blur color inset;

  1. 第一个参数 x-offset偏移（允许负值）

  2. 第二个参数 y-offset偏移（允许负值）

  3. 第三个参数 模糊度

  4. 第四个参数 颜色

  5. 第五个参数 内阴影 inset（不设置时默认为outset外阴影）

text-shadow属性

text-shadow: h-shadow v-shadow blur color;

  1. 第一个参数 x-offset偏移（允许负值）

  2. 第二个参数 y-offset偏移（允许负值）

  3. 第三个参数 模糊度

  4. 第四个参数 颜色

    <style>
        div{
            width:300px;
            height:300px;
            background-color:green;
            margin:0 auto;
            box-shadow:3px 3px 4px black;
            font-size:50px;
            color:black;
            text-shadow:2px 2px 2px gold;
        }
    </style>
    <div>我是div，我是文字</div>

效果如下：

阴影