在使用CSS的过程中，接触CSS属性的频率实在太高了，还是静下心来好好总结CSS那些属性的作用比较好，不然学了就忘其实没什么效果~这里先引用一段我在学习《CSS世界》的时候写的笔记。

1.布局更丰富: 移动端的崛起，催生了CSS3媒介查询、许多响应式布局特性 盒子布局(flexible box layout) 布局(grid layout) 2.视觉表现长足进步: 圆角、阴影和渐变让元素更有质感 transform变换让元素有更多可能 filter滤镜和混合模式让Web轻松变为在线的Photoshop animation让动画变得简单

下面我也就按照这个顺序好好了解一下这些属性(其实圆角、阴影和transform:scale()等属性我平时都已经用了很多次了)

1. 圆角

border-radius可以将元素的四个角设置成圆角

1.属性值

border-radius最多支持使用四个属性值

• 一个值 如border-radius:5px; 则该元素的四个角都使用这个值
• 两个值 如border-radius:20px 0px; 则该元素的左上角和右下角使用第一个值，左下角和右上角使用第二个值
• 三个值 如border-radius:1px 2px 3px; 则该元素左上角使用第一个值，左下角和右上角使用第二个值，右下角使用第三个值
• 四个值 如border:1px 2px 3px 4px; 则依次对应左上角、右上角、右下角、左下角(即从左上角开始顺时钟绕一圈)

2.斜杠二组值

border-radius支持单独设置每个圆角的水平半径和垂直半径，第一组值表示水平半径，第二组值表示垂直半径

如：

border-radius: 50px 30px 20px 10px / 20px 30px 20px 30px;

技巧：使用border-radius:50%;将一个正方形元素变成圆形

2. 阴影

1.框阴影

box-shadow属性可以向框添加一个或多个阴影

语法：box-shadow: h-shdow v-shadow blur spread color inset;

值	描述
h-shadow	必需水平阴影的位置 允许负值
v-shadow	必需垂直阴影的位置 允许负值
blur	可选模糊距离
spread	可选阴影尺寸
color	可选阴影颜色
inset	可选将外部阴影 (outset) 改为内部阴影

2.文本阴影

text-shadow属性可以向文本添加一个或多个阴影

语法：text-shadow: h-shadow v-shadow blur color

值	描述
h-shadow	必需水平阴影的位置 允许负值
v-shadow	必需垂直阴影的位置 允许负值
blur	可选模糊距离
color	可选阴影颜色

3. transform变换

1. 2D变换

方法	作用
translate(left,top)	平移变换
rotate(degree)	旋转变换
scale()	伸缩变换
skew()	翻转变换
matrix()	组合变换