CSS3之圆角和阴影

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 */
    }