声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：
- H5C3+移动布局： 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩
- JavaScript系列 ：JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）
文章目录
1.圆角边框
在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。
border-radius: length;
radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果
- 参数值可以为数值（例如10px）也可以采用百分比的形式
- 设置圆形的方式：设置length为正方形盒子的边长的一半或者直接写成50%；
- 设置圆角矩形的方式：如果是个矩形，直接设置length为高度的一半
- 该属性是一个简写属性，可以跟1个，2个，3个和2个值，与边距的复合属性类似，都是按照顺时针方向，即左上角，右上角，右下角，左下角
- 也可以每个角都单独设置，例如只想要改一左上角，可以设置：boder-top-left-radius: 10px;
2.盒子阴影（重点）
CSS3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离(阴影的虚实) |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影（outset）改为内部阴影 |
- 默认的是外阴影(outset)，但是不可以写这个单词，否则会导致阴影无效；
- 盒子阴影不占用空间，不会影响其他盒子的排列；
原先盒子没有阴影，当鼠标经过时给盒子添加阴影：
div: hover {
box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
}
3. 文字阴影（了解）
在CSS3中，可以使用text-shadow属性设置文字的阴影
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离(阴影的虚实) |
| color | 可选，阴影的颜色 |