CSS3补充

<p>椭圆边框3</p>
<p id="rcorner3"></p>

:

 #rcorner3{
        border-radius:50%;
        background:blue;
        padding:20px;
        width:200px;
        height:150px;
    }

<P>指定背景图片元素的圆角</P>
<p id ="rcorners3">圆角</p>

:

#rcorners3{
        border-radius:25px;
        background:url(1234.jpg);
        background-position:left top;
        background-repeat:repeat;
        padding:20px;
        width:200px;
        height:150px;
    }

阴影

外阴影
.div1{
        width:200px;
        height:100px;
        background:yellow;
        box-shadow:10px 10px 5px 5px gray;
    }
    
内阴影
.div2{
        width:200px;
        height:100px;
        background:green;
        box-shadow:10px 10px 5px 5px gray inset;
    }

设置多层阴影

div{
        width:200px;
        height:100px;
        background:yellow;
        box-shadow:10px 10px 5px 5px gray,
        15px 15px 5px 5px blue,
        20px 20px 5px 5px yellow,
        25px 25px 5px 5px green;
    }

倒影效果

p{
        font-size:36px;
        -webkit-box-reflect:below -10px
        -webkit-linear-gradient(top,transparent 20%,#ffffff)
    }