2020-09-01（盒子的尺寸、轮廓阴影和圆角）

1.盒子的尺寸
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

• box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
  可选值：
  content-box：默认值，宽度和高度用来设置内容区的大小
  border-box：宽度和高度用来设置整个盒子可见框的大小（width和height指的是内容区和内边距和边框的总大小）

2.轮廓阴影和圆角

• outline 用来设置元素的轮廓线，用法和border一样。
  轮廓和边框不同的点，就是轮廓不会影响到布局
• box-shadow 用来设置元素的阴影效果，阴影不会影响到页面布局
  第一个值 水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动
  第二个值 垂直偏移量，设置阴影的垂直位置，正值向下移动，负值向上移动
  第三个值 阴影的模糊半径
  第四个值 阴影的颜色

box-shadow:0px 0px 50px rgb(0,0,0,.3)

• border-radius 用来设置圆角，圆角设置的圆的半径大小
  border-top-left-radius
  border-top-right-radius
  border-bottom-left-radius
  border-bottom-right-radius
  border-radius 可以分别指定四个角的圆角
  四个值，左上 右上 右下 左下
  三个值，左上 右上/左下 右下
  两个值，左上/右下 右上/左下

如果想设置为椭圆角：

border-radius:10px/50px;

如果想设置为圆形：

border-radius:50%;