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