1.圓角
border-radius:可設置四個方向上不同圓角
div{
border:2px solid;
border-radius:25px;
}
/*
border-radius:25px 25px 25px 25px;
第一個值為左上角院究,第二個值為右上角,第三個值為右下角吏饿,第四個值為左下角
border-top-left-radius:30px;
border-top-right-radius:30px;
border-bottom-right-radius:30px;
border-bottom-left-radius:30px;
border-radius: 50px/15px; /*橢圓圓角*/
*/
2.陰影
box-shadow:可設置單邊陰影效果丹莲,調(diào)陰影網(wǎng)站
div{
box-shadow: 10px 10px 5px #888888;
}
/*
box-shadow: 0px -10px 0px 0px rgba(222,221,233,0), /*上邊陰影*/
/*x坐標值 y坐標值 模糊程度 陰影擴展長度 顏色*/
-10px 0px 0px 0px rgba(220,240,230,0), /*左邊陰影 */
10px 0px 0px 0px rgba(210,220,220,0), /*右邊陰影*/
0px 10px 30px 0px rgba(220,220,220,0.1); /*下邊陰影 */
*/
.圖片邊框
border-image:使用圖像創(chuàng)建一個邊框
div{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}