<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;
    }
    
內(nèi)陰影
.div2{
        width:200px;
        height:100px;
        background:green;
        box-shadow:10px 10px 5px 5px gray inset;
    }

設(shè)置多層陰影

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)
    }