CSS3常用的新功能包括圆角、阴渐变、2D变换、3D旋转、动画、viewpor和媒体查询。

圆角、阴影​

border-redius​

对一个元素实现圆角效果，是通过border-redius完成的。属性为两种方式：

1. 一个属性值，表示设置所有四个角的半径为相同值；
2. 对四个角分别设置，属性值的顺序为：左上角、右上角、右下角和左下角。

box-shadow​

box-shadow属性值为：h-shadow v-shadow blur spread color inset。

h-shadow：水平阴影的位置，必选项； v-shadow: 垂直阴影的位置，必选项； blur：可选值，模糊半径 color：可选项，阴影的颜色 inset：可选，默认是外部阴影outset。

如果需要设置多重阴影的话，就添加多个属性值。

渐变gradient​

CSS的渐变就是在两个或者多个颜色之间平稳过度显示。

1、线性渐变【linear-gradient】​

需要设置两个颜色和方向【或者一个角度】。语法如下： background:linear-gradient(direction,color1,color2)

其中方向的值direction，可以设置角度，比如0deg、90deg或者英文，比如to top，to right，to left。

2、径向渐变【redial-gradient】​

径向渐变就是圆形渐变或者是椭圆渐变。颜色是从起点向周围延伸过渡显示。

渐变可以指定渐变的中心点、渐变的形状和大小。默认情况下渐变中心为center。还可以设置left、top、right和bottom来表示渐变的中心位置。

渐变的形状默认是椭圆ellipse，圆形设置为circle

2D变换：旋转、倾斜、缩放和位移​

1、旋转【rotate】和倾斜【skew】​

旋转函数rotate，就是元素通过一个角度相对于原点进行旋转，如果旋转值为正数，则顺时针旋转；如果旋转值为负数，则是逆时针选装。

倾斜函数skew，让一个元素倾斜。

rotate和skew都可以接受两个参数，分别表示为x、y轴方向上的角度。

2、缩放【scale】和位移【translate】​

scale函数是根据中心原点对元素进行缩放；可以设置元素在X轴或者Y轴方向上进行缩放。translate位移函数原理相同。

任何一个元素，都有一个中心点，也就是元素的坐标原点。没有特殊设置的情况下，元素的中心原点位于元素X轴和Y轴的50%处。 比如；

如果想改变元素的中心点，就通过transform-origin，它的使用语法如下：

transform-origin:left top，表示元素中心为左上角。

3D旋转​

backface-visibility属性定义当元素不面向屏幕时是否可见，其值可为visible（可见）、hidden（不可见）。如果旋转后不希望看到其背面，该属性很有用。

动画​

1、transition​

transition的语法如下：

transition:transition-property transition-duration transition-timing-function transition-delay

transition-timing-function的取值为linear、ease、ease-in、ease-out、ease-in-out和cubic-bezier。

linear：匀速过度 ease：慢——快——慢 ease-in：慢速结束过度效果 ease-in-out：慢速开始和结束过度效果。 cubic-bezier：贝塞尔曲线函数，自定义过渡效果。

2、自定义动画​

在css3中第一一个动画，那么首先为建立对应的动画规则，也就是关键帧keyframes。

keyframes用来指定动画名称和动画规则，动画名称在执行动画周期的时候，作为一个标识符来使用。

在动画规则里面，使用关键字from和to来自定义动作。效果表现为从一种状态过渡到另一种状态。

如果要定义复杂动画的话，那就在form到to之间，使用相应的百分比。比如20%、40%、60%，在不同阶段执行不同的动画规则。以此来实现完整的动画效果。

01、什么是盒模型​

CSS中盒模型定义了盒子的每一个盒子包含了margin、border、padding和context。

根据盒子大小的计算方式不同，盒模型分为了两种：

一种是盒子宽高包含了border和padding；

另一种是盒子宽高不包含padding和border，是通过box-sizing属性设置为border-box。

02、重排和重绘​

重排：当DOM元素的几何信息发生了变化，比如元素的大小和位置，那么浏览器需要重新计算元素的几何属性，才把元素摆在正确的位置，这个过程就是重排。

重绘：在一个元素的外观发生变化时，但不影响布局，重新绘制元素外观。不涉及到计算。

发生重排时一定发生重绘，涉及到重绘不一定要重排。

在前端领域中，我们所说的响应式设计，其实就是UI要匹配不同尺寸的设备，能够完整展示网页内容。

这就需要在CSS设置对应的适配规则：

@media规则​

@media规则就是用来匹配不同设备的，比如响应式布局中常用到的宽度查询和适配：

.left{
    width:200px;
    height:100px;
}

@media only screen and (max-width:480px){
    .left{
        display:none;
    }
}

这段css代码就是在设备屏幕宽度小于480px的时候，侧边栏隐藏。

那么@media规则由四部分组成：

1. 媒体查询修饰符only；
2. 媒体类型screen；
3. 媒体条件and；
4. 媒体特性max-width；

媒体查询修饰符​

css媒体查询有两个修饰符：only和not。not就是否定意思，否定了整个查询语句；only修饰符最早是用来区分IE7和IE8的，因为这类老版本的浏览器会忽略不能识别的媒体条件和媒体特性，比如会把screen and 识别为screen。现在如果不考虑老版本的浏览器的话，那么only修饰符也就没有意义了。

媒体类型​

常见的媒体类型有screen、print和all。print类型只有在打印和打印预览的时候生效；其他的场景就使用screen；all就表示匹配所有的设备了。例如：

@media print{
    header,footer{
        display:none;
    }
}

这段样式代码表示在打印的时候，头部和尾部直接隐藏。

如果想指定多个媒体类型的话，就使用逗号隔开。比如：

@media screen,print{}

媒体条件​

媒体条件是有三个：not、and和or。

not表示否定某个媒体特性； and表示同时满足所有条件； or表示满足所有 条件之一即可。

例如：

    /*如果设备更新频率慢或者是不支持鼠标行为*/
    @media (update:slow) or (hover:none){}
    /*宽度在320px到480px，同时分辨率在150dpi的设备*/
    @media only screen{
        and (min-width:320px)
        and (max-width:480px)
        and (resolution:150dpi){
            body{
                line-height:2;
            }
        }
    }

媒体特性​

媒体特性就是对媒体特性的描述信息，包括浏览器、用户设备和使用环境。比如：

/*设备像素比等于2*/
@media (-webkit-device-pixel-ratio:2){}
@media (resolution:2dppx){}

/*设备像素比大于2*/
@media (-webkit-min-device-pixel-ratio:2){}
@media (min-resolution:2dppx){}

CSS媒体特性有很多，但是我们常用到也就是width、height，以及宽高比例和屏幕分辨率这些特性。

这里有两个浏览器已经更新了的特性：

prefers-color-scheme，用来检测当前网页是否处于深色模式或者是黑暗模式，它的参数如下：

1. no-preference，表示系统没有告知用户使用的颜色方案；
2. light，表示系统倾向于使用浅色模式；
3. dark，表示系统倾向于使用深色模式

比如：

@media (prefers-color-scheme:dark){
    body{
        filter:invert(1) hue-rotate(180deg);
        background:#333;
        color:#fff;
    }
    img{
        filter:invert(1) hua-rotate(180deg);
    }
}

如果需要在JavaScript中对系统判断主题的话，可以使用原生的window.matchMedia()方法，比如：

window.matchMedia("prefers-color-scheme:dark").matches;

prefers-reduced-motion：检测系统是否设置不必要动画的操作，参数如下：

1. no-preference表示用户没有通知系统任何首选项
2. reduced表示用户已通知系统

比如有这样的场景，在PC端浏览器展示一张图片，当鼠标经过图片时才显示图片的描述信息；如果是在移动端访问这张图片的话，图片的描述信息直接显示，代码如下：

    .img-text{
        display:none;
    }
    img:hover{
        display:block;
    }
    @media (any-hover){
        .img-text{
                display:block;
            }
    }

环境变量函数env()​

env()函数，是为了解决带有刘海屏和底部触摸条的移动设备，如果按钮和触摸条很贴近，那么就会出现交互冲突，env函数正好是让网页内容显示在设备的安全区域范围内。

/* 直接使用4个安全内边距值 */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

/* 使用4个安全内边距值，同时设置兜底尺寸值 */
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);

rem、vw单位和移动端适配​

rem，其中的r表示是root的意思，在html网页中，root指的是html元素。当我们在html元素设置一个字体大小的时候，如：

 html{
    font-size:16px;
}

那么0.5rem就等于8px，1rem等于16px。如果要整个网页都保持弹性，那么就需要让元素的宽高和文字大小使用rem单位，然后在不同的宽度设备设置对应的根字号大小即可，比如：

html{
    font-size:16px;
}

@media (min-width:414px){
    html{
        font-size:18px;
    }
}
@media (min-width:600px){
    html{
        font-size:20px;
    }
}

还有一种方式在head嵌入一段JavaScript代码：

document.documentElement.style.width = document.documentElement.clientWidth / 7.5 + 'px';

这两种方式效果不太好，因为很难捕获到准确的临界点，比如有的设备宽度是411px。

另一个最佳的方案是结合可视区域相对单位：vw、vh、vmin、vmax，和calc函数，代码如下：

html {
    font-size: 16px;
}
@media screen and (min-width: 375px) {
    html {
        /* 375px作为16px基准，414px宽度时正好对应18px的根字号大小 */
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 屏幕宽度从414px到1000px，根字号大小累积增加4px（18px-22px） */
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 屏幕宽度从1000px往后每增加100px，根字号大小就增加0.5px */
        font-size: calc(22px + 5 * (100vw - 1000px) / 1000);
    }
}

CSS变量​

CSS变量分为两部分：变量声明和变量使用。 变量的声明是由CSS自定义属性和对应的属性朱组成的，比如：

        :root {
            --custom-color: deepskyblue;
        }

在这段代码中，--custom-color是属于css的自定义属性名，deepskyblue是属性值。css自定义属性的命名限制比较少，但是也不能出现$、[、]、^、(、)、%等等特殊字符。

var()函数​

var函数是使用我们自定义的属性，语法为：var(属性名)。

CSS自定义的属性，可以在html标签内设置，比如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量</title>
    <style>
    </style>
</head>

<body>
    <div style="--color: deepskyblue;">
        <p style="border: 10px solid var(--color);">5555</p>
    </div>
</body>

</html>

对应效果如图：

虽然是可以这样写，但是不建议，因为这样的写法，会导致代码混乱，可读性差，不利于维护。

CSS自定义属性也可以在JavaScript中定义，直接修改上面的代码：

    <div id="box" >
        <p style="border: 10px solid var(--color);">5555</p>
    </div>

JavaScript：

    <script>
        var box = document.getElementById("box")
        box.style.setProperty('--color', 'deepskyblue');
    </script>

效果如上图所示。

如果仅仅是设置样式，那么也不建议这样写。样式代码和JavaScript代码最好是分开，这样利于维护。

如果我们自定义的属性值，需要能够作为字符串展示在页面中，那该怎么写呢？ 这就需要借助CSS的计数器来呈现自定义属性值了，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量</title>
    <style>
        :root {
            --percent: 23;
        }
        #box::before{
            counter-reset: progress var(--percent);
            content: counter(progress);
        }
    </style>
</head>

<body>
    <div id="box">
        <p>5555</p>
    </div>
</body>

</html>

效果如图：

在一个应用中和使用大量相同的属性值，比如相同的颜色。这样我们就可以把相同的属性值，设置在自定义属性中，然后在对应的模块中直接通过var函数调用对应的数值即可。

border-image属性对图像的规格和比例比较高，导致使用成本比较高。另外，常见的场景中，大家更倾向于扁平化而不是非拟物化，边框装饰通常在项目中不会出现。

border-image是由多个CSS属性缩写的，比如:

border-image-source属性值是一个image数据类型，那么所有图像类型都可以作为边框，比如渐变图像

border-image-slice属性​

border-image-slice属性作用是对原始图像进行划分，划分方位和顺序同margin一样，遵循上右下左的顺序。属性值是1到4个数值或者是百分比，后面可以带一个关键字fill：border-image-slice: 20% fill;

border-image-slice：20，表示在距离原图像上方20px、右侧20px、下方距离20px、距离原图像左侧20px。

默认情况下，图像中心位置不参与填充，如果想要填充的话，就使用额外的fill关键字：

.box{
    border-image-source: url("../img/bg.png");
    border-image-slice: 33.33% fill;
}

border-image-width属性​

属性值支持1~4个，不同的数量的值所对应的方位规则也是一样的。border-image-width的初始值为1。有这样几种情况：

1. border-image-width属性是数值，那么这个数值作为系数和border-width的宽度相乘结果作为边框图片的宽度，比如：

2. border-image-width为具体长度值，那么边框图片的宽度就是border-image-width的值。如果border-image-width为0，那么边框图片可能消失。

3. border-image-width属性值是百分比，那么就是相对于元素自身的尺寸计算了，水平方位是相对于宽度计算的，垂直方向是相对于高度计算的。

4. border-image-width属性值为auto，就使用border-image-slice值作为边框高度。

5. border-image-width不支持赋值

border-image-outset属性​

定义边框图像可以超过边框盒子的大小，默认值是0。

border-image-repeat属性​

定义图片如何填充边框，初始值为：stretch