css3中增添了哪些重要新特性(面试必问)

一.选择器

css3中有元素选择器、关系选择符、属性选择符、伪类、伪元素
1.元素选择器
* E E#id E.class
2.关系选择符
E F 包含选择符 CSS1 选择所有被E元素包含的F元素。
E>F 子选择符 CSS2 选择所有作为E元素的子元素F。
E+F 相邻选择符 CSS2 选择紧贴在E元素之后F元素。
E~F 兄弟选择符 CSS3 选择E元素所有兄弟元素F。
3.属性选择符
E[att] CSS2 选择具有att属性的E元素。
E[att=“val”] CSS2 选择具有att属性且属性值等于val的E元素。
E[att~=“val”] CSS2 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att^=“val”] CSS3 选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$=“val”] CSS3 选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*=“val”] CSS3选择具有att属性且属性值为包含val的字符串的E元素 。
E[att|=“val”] CSS2 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。
4.伪类选择符
E:not(s) CSS3 匹配不含有s选择符的元素E。
E:root CSS3 匹配E元素在文档的根元素。
E:last-child CSS3 匹配父元素的最后一个子元素E。
E:only-child CSS3 匹配父元素仅有的一个子元素E。
E:nth-child(n) CSS3 匹配父元素的第n个子元素E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
E:first-of-type CSS3 匹配父元素下第一个类型为E的子元素。
E:last-of-type CSS3 匹配父元素下的所有E子元素中的倒数第一个。
E:only-of-type CSS3 匹配父元素的所有子元素中唯一的那个子元素E。
E:nth-of-type(n) CSS3 匹配父元素的第n个子元素E。
E:nth-last-of-type(n) CSS3 匹配父元素的倒数第n个子元素E。
E:empty CSS3 匹配没有任何子元素（包括text节点）的元素E。
E:checked CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled CSS3 匹配用户界面上处于可用状态的元素E。
E:disabled CSS3 匹配用户界面上处于禁用状态的元素E。
E:target CSS3 匹配相关URL指向的E元素。
5.伪元素选择符
E:first-letter/E::first-letter CSS1/3 设置对象内的第一个字符的样式。
E:first-line/E::first-line CSS1/3 设置对象内的第一行的样式。
E:before/E::before CSS2/3 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after CSS2/3 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::placeholder CSS3 设置对象文字占位符的样式。
E::selection CSS3 设置对象被选择时的颜色。

二.变换(Transform) 、过渡(Transition) 、动画(Animation)

Transform用来向元素应用各种2D和3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜等操作。使用方式如下：

body{
            /* 父元素上添加视角  */3D
            perspective: 800px;
        }
#div1{
      width: 200px;
      height: 200px;
      background: #ff0000;
      margin:100px auto;
      /* transform: rotate(-30deg); */旋转
      /* transform: translate(200px) */平移
      /* transform: scale(2); */缩放
      /* transform: skew(30deg); */

      /* transform: rotateX(-60deg); */绕x旋转
      /* transform: rotateY(60deg); */
      transform: rotateY(30deg);
      transform-style: preserve-3d
      transform-origin: right bottom;//参照原点

Transition可以在当元素从一种样式变换为另一种样式时为元素添加效果，该属性有四个参数，第一个参数是要变化的属性，第二个参数是动画效果执行的时间，第三个参数是运动方式，第四个参数是延迟时间；

        #div1{
            width: 200px;
            height: 200px;
            background: #ff0000;
            /* 过渡：  属性  执行时间  运动方式  延迟时间 */
            transition: width 2s linear 2s;
        }
        #div1:hover{
            width: 500px;
        }

Animation让CSS拥有了可以制作动画的功能。使用CSS3的Animation制作动画我们可以省去复杂的js代码。

#div1{
	    width: 200px;
	    height: 200px;
	    background: #ff0000;
}
#div1:hover{
   	 animation: run 2s ease 2s infinite forwards;
}
@keyframes run {
	    30%{
	        width:800px;
	    }
	    50%{
	        width:200px;
	    }
	    100%{
	        width:1000px;
	    }
}

三.边框

CSS3新增了三个边框属性，分别是border-radius、box-shadow和border-image。border-radius可以创建圆角边框，box-shadow可以为元素添加阴影，border-image可以使用图片来绘制边框。IE9+支持border-radius和box-shadow属性。Firefox、Chrome以及Safari支持所有新的边框属性。

四.背景

CSS3新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break。、
background-clip
background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box; 背景显content区域开始显示
background-clip: no-clip; 默认属性，等同于border-box
通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。
background-origin
background-clip属性用于确定背景的位置，它通常与background-position联合使用，可以从 border、padding、content来计算background-position（就像background-clip）。
background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position
background-size
background-size属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：
background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

五.box-sizing

box-sizing:content-box;标准盒模型 宽度 = width + padding + border
box-sizing:border-box;怪异盒模型 ie6及ie6以下的浏览器 不写DOCTYPE 表现成怪异 ；宽度 = width

六.*！弹性盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 200px;
            list-style: none;
            display: flex;
            /* justify-content: space-around; */
            justify-content: space-between;
            flex-wrap: wrap;
        }
        li{
            width: 70px;
            height: 70px;
            background: #ff0000;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
</body>
</html>

//在这里就简单给大家看一下代码，这里很重要，后续我会单独讲~

七.文字效果

text-overflow、text-shadow等