2.4css圆角边框、阴影、浮动

圆角边框（重点）

border-radius: length;（可以输入像素或百分比）

radius：半径（圆的半径）

1. 如果是正方形想要设置成一个圆，把数值修改为高度的一半即可，或直接写为50%

  border-radius: 50%;

1. 如果要做一个圆角矩形，设置为高度的一半即可

  矩形高度 height：100px；

           border-radius：50px；

1. 该属性是简写属性，可跟四个值，分别为左上角、右上角、右下角、左下角（顺时针）
2. 分开写：border-top-left-radius；border-top-right-radius；border-bottom-right-radius；                          border-bottom-left-radius；

盒子阴影（重点）

box-shadow: h-shadow  v-shadow  blur  spread  color  inset;

h-shadow：必须写。水平阴影的位置，允许负值

v-shadow：必须写。垂直阴影的位置，允许负值

blur：可选。模糊距离（阴影的虚实效果）

spread：可选。阴影的尺寸（阴影的大小）

color：可选。阴影的颜色（rgba(0,0,0,0,3)）

inset：可选。将外部阴影(outset)改为内部阴影

注意：（1）默认是外阴影（outset），但是不可以写这个单词，否则会导致阴影无效

1. 盒子阴影不占用空间，不会影响其他盒子排序

原先盒子无阴影，鼠标经过盒子就添加阴影效果：

div:hover { box-shadow: 10px 10px 10px -4px rgba(0,0,0,0.3); }

文字阴影

text-shadow: h-shadow  v-shadow  blur  color;

浮动

传统网页布局的三种方式：（通过css摆盒子）