一、CSS

CSS，Cascading Style Sheets，层叠样式表，是一种标记语言，由浏览器解释执行用来使页面变得更美观

CSS3 是CSS的最新标准，是向后兼容的，CSS1/CSS2 的特性在 CSS3 中都是可以使用的

而 CSS3 也增加了很多新特性，为开发带来了更佳的开发体验

二、CSS3新增的样式

2.1 边框

border-radius：创建圆角边框
box-shadow：为元素添加阴影
border-image：使用图片来绘制边框

2.2 背景

background-clip：用于确定背景画区
background-origin：用于确定背景画区的起始位置
background-size：用于调整背景图片的大小，主要用于设定图片的本身
background-break：用于元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示

2.3 文字

word-wrap：文字换行方式
text-overflow：设置或检索当当前行超过指定容器的边界时如何显示
text-shadow：可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
text-decoration：规定添加到文本的修饰

2.4 颜色

rgba，分为两部分，rgb为颜色值，a为透明度
hala，分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

2.5 transition 过渡

transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：

过度时间
持续时间

语法如下：

/* 简写模式 */
transition: CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
/* 分开写模式 */
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

2.6 transform 转换

transform属性允许你旋转，缩放，倾斜或平移给定元素

transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)

使用方式：

transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：缩放
transform: rotate(0.5turn)：旋转
transform: skew(30deg, 20deg)：倾斜

2.7 animation 动画

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬

animation属性：

animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction：动画执行方向
animation-paly-state：动画播放状态
animation-fill-mode：动画填充模式

2.8 渐变

颜色渐变是指在两个颜色之间平稳的过渡，css3渐变包括

linear-gradient：线性渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

radial-gradient：径向渐变

linear-gradient(0deg, red, green);

2.9 Filter 滤镜

css3的滤镜也是一个亮点，功能强大，写法也灵活。

2.10 flex布局

【CSS】flexbox-弹性盒模型布局

2.11 grid - 栅格布局

栅格化布局，就是grid

【CSS】Grid网格布局

2.12 多列布局

多列布局可以将文本内容设计成像报纸一样的多列布局。但是浏览器支持性有待提升，所以建议加上前缀

column-count：数字，以几列的形式展示
column-rule：列规则

2.13 盒模型

2.14 媒体查询

媒体查询，就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！不过由于我最近的项目都是使用rem布局。所以媒体查询就没怎么用了！但是，媒体查询，还是很值得一看的！说不定哪一天就需要用上了！

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    body {
        background-color: pink;
    }
    @media screen and (max-width: 960px) {
        body {
            background-color: darkgoldenrod;
        }
    }
    @media screen and (max-width: 480px) {
        body {
            background-color: lightgreen;
        }
    }
    </style>
</head>
<body>

    <h1>重置浏览器窗口查看效果！</h1>
    <p>如果媒体类型屏幕的可视窗口宽度小于 960 px ，背景颜色将改变。</p>
    <p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p>

</body>
</html>

2.15 混合模式

....

参考：掘金-个人总结（css3新特性）

【CSS】CSS3新增的特性