border-radius ,box-shadow边框阴影效果

border-radius 可实现，圆形，半圆，椭圆，圆角方形等UI效果。

border-radius 边框圆角，当border-radius为正方形宽度的一般，就截取一个圆形。
如果是一个长方形，border-radius是较窄的宽度的一半，就会截取一个圆角矩形
椭圆：‘/’ 斜杠-用来设置单个角，不同方向的半径值。
border-radius:100px/50px; // 水平x方向、垂直y方向。
// 做1/4个椭圆
border-top-right-radius:100px 50px;
//设置某个角点的两个方向上的不同圆角。
border-top-right-radius:100px 50px;
border-bottom-left:80px 40px;
border-bottom-right: 60px 30px;
border-top-left:40px 20px;
// 如果想设置四个角点的不同方向上的不同圆角值：
// 分别是水平方向的四个值，垂直方向的四个值。
border-radius:100px 80px 60px 40px/50px 40px 30px 20px;
// 100px与50px组合，成为左上角。以此类推。

// border-上下-左右-radius：
border-top-right-radius: 50px; // 添加某个方向角的圆角。
border-bottom-left-radius: 50px;
border-radius:5px; //设置1个值，四个角的值都是一样的。
border-radius:5px 20px;    //设置2个值：第一个值：左上右下；第二个值，右上左下
border-radius:5px 10px 15px; //设置3个值：第一个值是左上，第2个值右上/左下，第3个值右下。
border-radius:5px 10px 15px 20px;  //设置4个值：左上，右上 右下 左下。

-----------------------------------------------------------------------------------------

/* 需求：把前面4个盒子的图片添加右下角的外阴影，为最后盒子添加4个方向的内阴影。 */
            .item:nth-of-type(-n+4) {
                box-shadow: 3px 3px  3px #ccc;
            }
            .item:last-of-type{
                box-shadow: 3px 3px  3px #ccc inset, -3px -3px  3px #ccc inset;
            }