CSS3新特性概述

本文适合快速浏览和回忆CSS3新特性，具体内容查看[菜鸟教程]。

边框：

• border-radius
• box-shadow
• border-image

box-shadow:x轴正向偏移 y轴正向偏移 阴影粗细 阴影颜色;

CSS3 border-radius - 指定每个圆角:
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角一个值： 四个圆角值相同

椭圆边框：
1.border-radius:50px/15px;
2.border-radius:50%;

---

背景：

• background-image
• background-size
• background-origin
• background-clip

bakcground-image:url(xxx.img),url(xxx.img)……可以有多个背景;
background-origin:content-box/padding-box/border-box;背景图片相对盒子定位；
background-clip:类似于origin,keywords是一样的，但clip是对图片的裁剪，而origin相当于缩放；

---

渐变：

• 线性渐变：(background:)linear-gradient(direction,color1,color2);
• 径向渐变：(background:)radial-gradient(center,shape size,start-color,…,last color);

线性渐变direction：
方式一：top/left/right/bottom/left top/right bottom……
方式二：角度deg:0deg为top，然后deg增加和顺时针一样。可以用负数（逆时针方向）表示;

---

文本：

• @font-face
• text-shadow
• text-overflow:elipsis/clip
• word-wrap:break-word
• word-break:keep-all/break-all

@font-face:自定义字体：

<style> @font-face{    font-family: myFirstFont;    src: url(sansation_light.woff);}div{    font-family:myFirstFont;}</style>

text-shadow与box-shadow使用方法类似；
text-overflow：当容器设置overflow:hidden时，超出的文本会被隐藏，而text-overflow能够使文本能看出被隐藏的效果；
word-wrap:break-word：强制换行；
word-break:keep-all不拆分单词换行，break-all拆分单词换行；

---

2D/3D转换：

2D转换：

函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。 scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 scaleX(n) 定义 2D 缩放转换，改变元素的宽度。 scaleY(n) 定义 2D 缩放转换，改变元素的高度。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。 skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。 skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

3D转换：

函数 描述 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate3d(x,y,z) 定义 3D 转化。 translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。 translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。 translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。 scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。 scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿 X 轴的 3D 旋转。 rotateY(angle) 定义沿 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿 Z 轴的 3D 旋转。 perspective(n) 定义 3D 转换元素的透视视图。

---

过渡：

• transition:[指定添加效果的CSS属性] [指定效果的持续时间] (,[CSS属性][持续时间],…)

可以多项改变，添加逗号分隔即可；
过渡属性：（过渡属性可以直接在transition中写全，或者一项项列出来）

属性 描述 transition 简写属性，用于在一个属性中设置四个过渡属性。 transition-property 规定应用过渡的 CSS 属性的名称。 transition-duration 定义过渡效果花费的时间。默认是 0。 transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 transition-delay 规定过渡效果何时开始。默认是 0。

---

动画：

• @keyframes

与@font-face类似，也与transition类似：

    div    {        width:100px;        height:100px;        background:red;        animation:myfirst 5s;        -webkit-animation:myfirst 5s; /* Safari and Chrome */    }    @keyframes myfirst    {        from {background:red;}        to {background:yellow;}    }    @-webkit-keyframes myfirst /* Safari and Chrome */    {        from {background:red;}        to {background:yellow;}    }

---

多列：

• column-count
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule
• column-span
• column-width

多列可以使文本内容设计得像报纸一样多列布局。

---

用户界面：

• resize:both;
• box-sizing: border-box;
• outline-off: XXXpx;

resize:将容器框变成用户可拖拉和控制大小的框；
box-sizing：将容器大小固定，即content+padding+border+margin=width；
outline-off:给容器添加一层外边框，属性px值为与内边框的距离。

---

图片：

响应式图片：

    img {        max-width: 100%;        height: auto;    }

滤镜： filter: grayscale(100%);

---

弹性盒子(Flex Box)：

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
常用属性为：

属性 描述 display 指定 HTML 元素盒子类型。 flex-direction 指定了弹性容器中子元素的排列方式 justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。 align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 flex-flow flex-direction 和 flex-wrap 的简写 order 设置弹性盒子的子元素排列顺序。 align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。 flex 设置弹性盒子的子元素如何分配空间。

---

多媒体查询：

@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则，但是这些多媒体类型在很多设备上支持还不够友好。
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。
媒体查询可用于：
* viewport(视窗) 的宽度与高度
* 设备的宽度与高度
* 朝向 (智能手机横屏，竖屏) 。
* 分辨率
* ……