圆角边框

border-radius: length;

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

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

  1. 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
  2. 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  3. 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  4. 一个值：四个圆角值相同

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

技巧：让一个正方形 变成圆圈，圆角矩形也同理。

1
border-radius: 50%; /*或者是正方形的边长一半*/

盒子阴影（box-shadow）

阴影不占用空间，不影响其他盒子排列

1
box-shadow: offset-x offset-y [blur [spread]] [color] [inset]
值 描述
offset-x 阴影的水平偏移量。正数向右偏移，负数向左偏移。
offset-y 阴影的垂直偏移量。正数向下偏移，负数向上偏移。
blur 可选。阴影模糊距离，越大越影子模糊，不能取负数。
spread 可选。阴影大小
color 可选。阴影的颜色
inset 可选。表示添加内阴影，默认为外阴影，（不可以写outset） 
1
2
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
   box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);