2021-04-16

CSS3媒体查询

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 = 元素的实际高度

这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。

box-sizing 属性解决了这个问题。

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

        content-box 正常计算

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

CSS3渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

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

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

语法：

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

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

线性渐变

语法：

        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);

径向渐变

语法：

        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 旋转。