CSS3 新增圆角以及盒子阴影

1.圆角边框

border-radius:length;

border-top-left-radius   定义了左上角的弧度
border-top-right-radius   定义了右上角的弧度
border-bottom-right-radius   定义了右下角的弧度
border-bottom-left-radius   定义了左下角的弧度

• 其中每一个值可以为 数值或百分比的形式。

• 技巧：让一个正方形 变成圆圈

border-radius: 50%;

如果要在四个角上一一指定，可以使用以下规则👇👇：

border-radius: 左上角 右上角  右下角  左下角;

1. 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

2. 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

3. 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

4. 一个值：四个圆角值相同

2.盒子阴影(box-shadow)

box-shadow: offset-x offset-y [blur [spread]] [color] [inset]

值	描述
offset-x	阴影的水平偏移量。正数向右偏移，负数向左偏移。
offset-y	阴影的垂直偏移量。正数向下偏移，负数向上偏移。
blur	可选。阴影模糊距离，不能取负数。
spread	可选。阴影大小
color	可选。阴影的颜色
inset	可选。表示添加内阴影，默认为外阴影

div {
   width: 200px;
   height: 200px;
   border: 10px solid red;
   /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
   /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
   box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);   
}