CSS3新增属性-学习笔记

文章内容输出来源：拉勾教育大前端就业集训营；

一、新增选择器

1、子集选择器

• 选取带有特定父元素的元素
• 语法：E1 > E2
• E2必须是E1的直接子元素

2、兄弟选择器

(1) 相邻兄弟选择器

• 选择紧接在另一个元素后面的元素，且二者都有相同的父元素
• 语法：E1 + E2
• 选中的是E2

(2) 其他兄弟选择器

• 选择同一个父元素中E1后面的所有E2元素
• 语法：E1 ~ E2

3、结构伪类选择器

• 根据子级来选择时，一般会省略前面的E。因为如果E与其实际对象不对应，样式无法加载。
• 权重等价于类选择器

选择器	作用
E: first-child	匹配父元素中的第一个子元素E
E: last-child	匹配父元素中最后一个子元素E
E: nth-child(n)	匹配父元素中的第n个子元素E（n可以是数字、关键字（even、odd）或公式）
E: first-of-type	匹配父元素中指定类型E的第一个
E: last-of-type	匹配父元素中指定类型E的最后一个
E: nth-of-type(n)	匹配父元素中指定类型E的第n个

4、伪元素选择器

• 只能给双标签添加
• 冒号前不能有空格
• 伪元素必须有content属性
• ::before和::after所创建的元素是行内元素，且在DOM中看不见
• 权重等价于标签选择器

选择器	作用
E::before	在E元素内部的前面插入一个元素
E::after	在E元素内部的最后插入一个元素
E::first-letter	选择E容器中的第一个字符/文字
E::first-line	选择E容器中的第一行

5、属性选择器

• 选择包含指定属性的标签
• 权重等价与类选择器

选择器	作用
E[attr]	选择具有attr属性的E元素
E[attr=“val”]	选择attr属性值为val的E元素
E[attr^=“val”]	选择具有attr属性，且以val开头的E元素
E[attr$=“val”]	选择具有attr属性，且以val结尾的E元素
E[attr*=“val”]	选择具有attr属性，且值中含有val的E元素

二、盒模型 box-sizing

指定盒模型，设置如何计算一个元素的总宽度和总高度。

1、content-box

• 默认值，标准盒模型，盒模型是外扩的。
• width、height 内部只包含内容。
• 添加padding、border之后，width和height不会发生变化。但盒子所占区域变大了。

2、border-box

• 怪异模式，盒模型是内减的。
• 添加padding、border 之后，width和height会变小。盒子所占区域不改变。

3、inherit

• 继承父元素属性值

三、新增属性

1、边框圆角 border-radius

• 属性值：像素值或百分比（ 参考的是width(height)+padding+border ）
• border-radius: 10px/20px; 这样的写法是用斜杠分割两部分属性值，前面为水平半径，后面为垂直半径，得到的是一个椭圆角。
• border-radius: 10px; 一个属性值，则水平和垂直都设置成同一个值，得到的是圆角。
• 还可以分开写。如：border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius。
• IE8及以下不支持

2、文字阴影text-shadow

• 属性值
  • h-shadow，必须项，px值，水平方向阴影。
  • v-shadow，必须项，px值，垂直方向阴影。
  • blur，px值，模糊的距离。
  • color，阴影颜色
• 可以设置多层阴影，使用逗号分隔多个阴影的属性值。先写的覆盖后写的。

text-shadow: 10px 10px 5px red, 20px 20px 5px green;

3、盒子阴影box-shadow

• 属性值
  • h-shadow，必须项，px值，水平方向阴影。
  • v-shadow，必须项，px值，垂直方向阴影。
  • blur，px值，模糊的距离。
  • spread，px值，阴影的尺寸，即向四周扩散，阴影扩大。
  • color，阴影颜色。
  • inset，将外部阴影改为内部阴影。
• 多层阴影，与文字阴影类似。

4、过渡属性transition

• 语法
  • transition: 过渡的属性 过渡的时间 运动曲线 延迟时间;
    • 过渡属性 transition-property
      • none，没有属性过渡
      • all，所有变化的属性
      • 属性名（多个属性名用逗号“,”分隔开）
    • 过渡时间 transition-duration
      • 以秒为单位
      • 整个动画完成需要的时间
    • 运动曲线 transition-timing-function
      • 动画以怎样的方式过渡
      • linear，线性，匀速加载
      • ease，慢-快-慢
      • ease-in，慢-快
      • ease-out，快-慢
      • ease-in-out，开始和结束都慢
      • cubic-bezier(x1,y1,x2,y2)，贝塞尔曲线，x表示时间，y表示进度
    • 延迟时间 transition-delay
      • 以秒为单位
      • 动画开始前需要等待的时间

transition: all 2s ease 0s;	

5、2D转换 transform

• 对元素进行移动、缩放、转动、拉长或拉伸

（1）位移 translate()

• translate(x,y)，可为px值或%（参考盒子border及以内的宽高）
• translate(x)，水平方向位移

transform: translate(10px,10px);		/* 向右平移10px，向下平移10px */
transform: translate(20px);		/* 向右平移20px */

（2）缩放 scale()

属性值	作用
scale(x,y)	改变宽度和高度的倍数
scale(n)	宽高同时缩放n倍
scaleX(n)	改变宽度
scaleY(n)	改变高度

（3）旋转 rotate()

• rotate(数字deg)
• 旋转时，坐标轴也跟着改变

（4）倾斜 skew()

• skew(数字deg,数字deg）
• 第一个数值表示水平方向，第二个表示垂直方向

（5）基准点 transform-origin

• 调整元素的水平、垂直方向原点的位置
• 属性值，包含两个，中间用空格隔开
• x，left、center、right、像素、%
• y，top、center、bottom、像素、%

transform-origin: left top;		/* 以左上角作为基准点 */

6、3D转换

（1）透视属性perspective

• 要呈现3D效果，需要设置透视属性。
• 属性值为像素值，一般在1000px以上。值越大，3D效果越准确。

（2）3D位移

属性值	作用
translateX(x)	在x轴上的位移
translateY(y)	在y轴上的位移
translateZ(z)	在z轴上的位移

（3）3D旋转

• 面向轴箭头，顺时针为正的度数

属性值	作用
rotateX(数字deg)	x轴3D旋转
rotateY(数字deg)	y轴3D旋转
rotateZ(数字deg)	z轴3D旋转

（4）transform-style属性

• 设置被嵌套子元素的父元素的3D空间中显示
• flat：平面
• preserve-3d：三维空间

7、转换的浏览器兼容

• internet Explorer10、Firefox以及Opera支持transform属性
• Chrome 和 Safari需要前缀-webkit-
• IE9 需要前缀-ms-

8、动画

@keyframes 规则用于创建动画

• 在@keyframes中规定某项CSS样式，就能创建由从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数
• 需要使用%来规定变化发生的时间，或用关键词from和to，等同于0%和100%。

        .box {
            width: 100px;
            height: 100px;
            background-color: salmon;
            animation: squareMove 5s ease infinite;
        }
        @keyframes squareMove{
            0% {
                transform: translate(0px,0px);
            }
            25% {
                transform: translate(500px,0px);
            }
            50% {
                transform: translate(500px,500px);
            }
            75% {
                transform: translate(0px,500px);
            }
            100% {
                transform: translate(0px,0px);
            }
        }