CSS3（2）

媒体查询

CSS2 中引入了 @media 规则，它让为不同媒体类型定义不同样式规则成为可能

例如：您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备，甚至还有一组用于电视，等等。 不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。

CSS3 引入了媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

视口的宽度和高度

设备的宽度和高度

方向平板电脑/手机处于横向还是纵向模式）

分辨率

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

CSS3 媒体类型：

all        用于所有媒体类型设备。

print    用于打印机。

screen    用于计算机屏幕、平板电脑、智能手机等等。

speech    用于大声“读出”页面的屏幕阅读器。

/*下面的例子在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色会是粉色）：*/
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

box-sizing

允许我们在元素的总宽度和高度中包括内边距（填充）和边框。

假如不指定 CSS box-sizing 属性,默认情况下，元素的宽度和高度是这样计算的：

width + padding + border = 元素的实际宽度

height + padding + border = 元素的实际高度

属性：

border-box;，则宽度和高度会包括内边距和边框：

content-box    正常计算

Inherit    从父元素继承 box-sizing 属性的值。

渐变：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

语法：

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

  从上到下（默认情况下） background: linear-gradient(red, blue);

线性渐变 - 从左到右 background: linear-gradient(to right, red , blue);

对角 background: linear-gradient(to bottom right, red , blue);

使用角度 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

background: linear-gradient(180deg, red, blue);

径向渐变（Radial Gradients）- 由它们的中心定义

语法：

background: radial-gradient(shape size at position, start-color, ..., last-color);

颜色节点均匀分布 background: radial-gradient(red, yellow, green);

颜色节点不均匀分布 background-image: radial-gradient(red 5%, yellow 15%, green 60%);

形状为圆形 background-image: radial-gradient(circle, red, yellow, green);

2D 转换：

CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。

2D变换方法：

translate()  

rotate()

scale()

skew()

transform方法

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

语法：transform: translate(50px,100px);

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

语法：transform: rotate(30deg);

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

语法：transform: scale(2,4);

skew() 方法，包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX( );表示只在X轴(水平方向)倾斜。

skewY( );表示只在Y轴(垂直方向)倾斜。

语法：transform: skew(30deg,20deg);

3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

3D转换方法：

translate3d(x,y,z)   定义 3D 转化。

scale3d(x,y,z)   定义 3D 缩放转换。

rotate3d(x,y,z,angle)    定义 3D 旋转。