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:可设置单边阴影效果,调阴影网站
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:使用图像创建一个边框
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 */
}