CSS3圆角

border-radius，一个最多可指定四个border-*-radius属性的复合属性，这个属性允许你为元素添加圆角边框

border-radius: 10px;       // 四个角的弧度都设置为10px
border-radius: 20%;        // 四个角的弧度都设置为20%，这里的百分比是圆角基于边的比例
border-radius: 50%;        // 如果元素本身是正方形，会得到一个圆形

border-radius: 10px 20px;
// 左上角，右下角：10px
// 右上角，左下角：20px

border-radius: 10px 20px 30px;
// 左上角：10px
// 右上角，左下角：20px
// 右下角：30px

border-radius: 10px 20px 30px 40px;
// 左上角：10px 
// 右上角：20px 
// 右下角：30px 
// 左下角：40px

border-top-left-radius：10px;      // 左上角的弧度：10px
border-top-right-radius：10px;     // 右上角的弧度：10px
border-bottom-left-radius：10px;   // 左下角的弧度：10px
border-bottom-right-radius：10px;  // 右下角的弧度：10px

// 如果考虑兼容性，可以这样写
-webkit-border-radius: 50%;  // 谷歌
   -moz-border-radius: 50%;  // 火狐
    -ms-border-radius: 50%;  // IE
     -o-border-radius: 50%;  // Opera
        border-radius: 50%;

CSS3盒阴影

box-shadow，可以设置一个或多个下拉阴影的框

// 语法：box-shadow: h-shadow v-shadow blur spread color inset
// h-shadow  水平方向的偏移量
// v-shadow  竖直方向的偏移量

// blur      模糊度
// 从透明到不透明的过程，不可以为负值。
// 比如10px，就是从边框向内10px范围内完成透明到不透明的过程。

// spread    扩展度
// 向外扩展多少阴影。
// 比如10px，就是向外扩展10px的阴影。

// color     阴影颜色

// inset     内阴影
// inset的情况下可以设置spread为负值

box-shadow: 50px 30px 0px 0px yellow;
// 不解释，普通用法

box-shadow: 50px 30px 10px 20px yellow inset;
// 从元素的左上角开始，水平方向上向内偏移50px，竖直方向上向内偏移30px
// 水平方向上，从第40px到第50px的范围内，完成从透明到不透明的过程
// 竖直方向上，从第20px到第30px的范围内，完成从透明到不透明的过程
// 向内扩展20px阴影