这是我参与「第四届青训营 」笔记创作活动的第12天。
圆角边框
border-radius属性用于设置元素的外边框圆角。
border-radius: length;
radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。
- 参数值可以为数值或百分比的形式
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。
- 如果是个矩形，设置为高度的一半就可以做。
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。
盒子阴影
用box-shadow属性为盒子添加阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅CSS颜色值。 |
| inset | 可选。将外部阴影(outset)改为内部阴影。 |
- 默认的是外阴影(outset)，但是不可以写这个单词，否则导致阴影无效。
- 盒子阴影不占用空间，不会影响其他盒子排列。
文字阴影
用text-shadow属性将阴影应用于文本。
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
传统网页布局的三种方式
网页布局的本质一用CSS来摆放盒子，把盒子摆放到相应位置。
CSS提供了三种传统布局方式：
- 普通流（标准流）
- 浮动
- 定位
浮动
有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。 浮动最典型的应用：可以让多个块级元素一行内排列显示。 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
选择器 { float: 属性值; }
| 属性值 | 描述 |
|---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
