css3新增属性

css3新增属性

box-shadow

box-shadow: 10px 10px 10px rgba(54,54,54,0.36);
元素阴影，这个不会影响页面布局；分别指定如下参数：

1. 水平偏移量，正数向右，负数向左
2. 垂直偏移量，正数向下，负数向上
3. 阴影模糊效果，数值越大越模糊
4. 颜色

border-radius

border-radius: 2px;
边框圆角半径，会影响box-shadow显示

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

设置椭圆

border-radius: 30px/10px;

position: sticky;

粘滞定位，和相对定位类型，不同的是粘滞定位可以在元素到达某个位置时将其固定住，兼容性不好；
通过设置top、bottom、left、right设置固定范围，当这些值设置为0px时，就是整个视口

渐变背景

渐变是图片，需要通过background-image进行设置；

线性渐变

渐变默认是从上到下；

• linear-gradient(red, yellow) 从上到下，红色到黄色的渐变
• linear-gradient(to right, red, yellow) to right指定渐变方向，这个指定方向还可以设置deg（度），turn(圈)
• 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，即指定的颜色之间的距离是相等的
  也可以手动指定分布情况：background-image: linear-gradient(red 20px, yellow 80px);，指定渐变分界颜色出现的位置

可重复的渐变背景

background-image: repeating-linear-gradient(red 0px, yellow 40px);

径向渐变

• radial-gradient(red, yellow) red中心向四周辐射yellow

整体和线性渐变一样；默认情况下径向渐变的形状根据元素形状来计算，即：

• 元素为正方形，径向渐变就是圆形

• 元素为长方形，径向渐变就是椭圆

• 可以手动指定径向渐变范围的大小radial-gradient(100px 200px, red, yellow)
  这个指定大小存在预设值

  • closest-side 到达最近的边
  • closest-corner 到达最近的角
  • farthest-side 到达最远的边
  • farthest-corner 到达最远的角

• 可以手动指定元素的径向渐变形状：radial-gradient(circle, red, yellow)或者radial-gradient(ellipse, red, yellow)

• 可以手动执行元素径向渐变的中心点位置radial-gradient(100px 200px at 0px 0px, red, yellow)

可重复的渐变背景

background-image: repeating-radial-gradient(red 0px, yellow 40px);

过渡

过渡，只有在属性、样式发生变化的时候才会执行，如hover状态；
transition: 对象 时间，通过过渡指定一个属性切换到目标状态以过渡的方式，主要有两个，一个是目标状态，一个当前状态，一个是过渡时间；

• transition: all 2s 所有属性再2s内进行过渡
• transition: width 0.5s, height 1s;同时指定多个使用逗号隔开

分属性

简写属性无顺序要求，只是路过同时使用duration和delay，那么第一个是duration，第二个是delay

• transition-property 指定要执行过渡的属性，多个属性使用逗号隔开，如果要针对所有属性，那就设置为all

  • transition-property: width, height;
  • transition-property: all;

• transition-duration 执行执行过渡的持续时间，针对transition-property不同属性设置的transition-duration也使用逗号隔开，然后会对应上去，如：

  transition-property: width, height;
  transition-duration: 1s, 2s;
  

• transition-timing-function 执行过渡的时间分布效果，注意，要看到效果一定要先指定transition-during；

  • ease 默认效果，慢速开始，先加速再减速
  • linear 匀速运动
  • ease-in 加速运动
  • ease-out 减速运动
  • ease-in-out 先加速后减速
  • cubic-bezier() 通过指定函数，通过网站https://cubic-bezier.com/#.17,.67,.83,.67可以得到这个曲线
  • steps() 指定过渡效果分几步进行过渡，可设置一个、两个值
    • 一个值就是指定分几步
    • 两个值就是制定分几步，每次在一步的什么时候执行过渡

• transition-delay 指定进行过渡的延时

动画

设置动画效果，必须先要设置一个关键帧，动画效果执行完毕就正常显示元素。
简写属性无顺序要求，只是路过同时使用duration和delay，那么第一个是duration，第二个是delay

• animation-name 指定动画的关键帧
• animation-duration 指定整个动画持续时间
• animation-delay 指定动画延时时间
• animation-timing-function 指定动画播放时间函数，这个函数指的是关键帧之间的函数；
  • step() 指定的是关键帧之间的跳转次数
• animation-iteration-count 动画执行次数，默认一次
  • infinite 无限次
• animation-direction 方向
  • normal from -> to
  • reverse to -> from
  • alternate 交替 from -> to -> from …
  • alternate-reverse 反向交替 to -> from -> to …
• animation-play-state 控制动画停止和播放
  • running 播放
  • paused 停止
• animation-fill-mode 动画执行的填充效果
  • none 默认，动画执行完毕元素回到元素属性定义的位置
  • forward 动画执行完毕元素停止到动画结束的位置
  • backward 动画延迟等待时，元素会处于动画开始状态，结束位置会回到none位置
  • both == backward + forward

关键帧

@keyframes
关键帧设置了动画执行的每一个步骤；

与transition的关系

transition – 过渡，与transition类型，但是transition需要当元素属性发生变化才会发生；而动画可以自动触发动态效果；

demo

.parent-30 {
    width: 100px;
    height: 100px;

    background-color: silver;

    /* 设置动画 */
    animation-name: keyframe-1;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-timing-function: ease-in-out;
}

@keyframes keyframe-1 {
/* to表示动画的开始位置，也可以使用 0% 表示 */
from {
    width: 100px;
    height: 100px;
}

/* from表示动画的结束位置，也可以使用 100% 表示 */
to {
    width: 200px;
    height: 200px;
}

<div class="parent-30">

div>

变形

变形是指元素形状或位置发生的改变；他不会影响页面布局；这个就是和margin的区别，margin会影响到布局。
transform 用来设置变形效果，变形效果如果想要看到3D效果，就要对变形元素的父元素设置persprctive属性

平移

• translateX() 元素沿着X方向平移，平移使的百分比不是相对父元素，而是相对自身
• translateY() 元素沿着Y方向平移，平移使的百分比不是相对父元素，而是相对自身
  可以利用上面两个实现可适应内容大小的块盒居中
• translateZ() 元素沿着Z方向平移
  Z轴平移，正常情况下就是调整元素和人眼之间的距离，距离越大，元素离人越近
  Z轴平移属于立体效果(近大远小)，默认情况下网页不支持，如果需要看见效果，必须要设置视距perspective：transform: perspective(800px) translateZ(200px);；设置视距之后Z轴平移才有效果；
  平移Z轴，他是将整个屏幕向用户方向移动，就像场景视图概念，此时场景向用户移动，视图显示的范围必定会缩小，于是显示范围会缩减，计算机的视图一直是场景中心，因此会出现四周元素消失的情况。

使用

transform: translateX(-50%) translateY(-50%);这个是按照顺序进行变形的。

旋转

旋转的时候立体坐标系的原点在元素的中心位置，横穿原点的是x轴，纵穿原点的是y轴，垂直显示器平面的是Z轴，站在轴的正方向，顺时针旋转时，旋转角度为正数；逆时针为负数。
通过旋转可以使元素沿着x、y、z旋转指定的角度

• rotateZ 沿着Z旋转，旋转的点为元素中心
• rotateX 验证X旋转，旋转的轴为X轴，是元素横向的、元素纵向中点的那条线，父元素设置perspective有立体效果
• rotateY 沿着Y旋转，旋转的是Y轴，横向左边为元素中点，父元素设置perspective有立体效果
  旋转到背面元素上的数据依旧是可见的，只不过是倒过去了。

使用

transform: rotateZ(45deg);

其他

backface-visibility

• visible 默认显示
• hidden 这个不显示是直接背景也都不显示的

使用

transform: rotateY(45deg) translateZ(100px);，这个是按照顺序进行变形的，先旋转Y轴，然后Z轴也会跟着旋转，因此平移Z轴时移动的方向并不是正对着人，而是会有一个偏移。

立体效果

perspective和transform-style均设置在父元素中

perspective

perspective 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。
三维元素在观察者后面的部分不会绘制出来，即 z 轴坐标值大于 perspective 属性值的部分。
当该属性值不为 0 和 none 时，会创建新的 层叠上下文。在这种情况下，容器内元素的层叠关系像是使用了 position: fixed 一样。

元素位于3D空间还是平面中

transform-style

• flat 默认值，设置元素的子元素位于该元素的平面中，一般的移动(主要是Z轴移动），他是没有效果的，即使有效果，那也是计算机计算出来的，仅显示x、y平面上可以看到的；设置为preserve-3d，那么在显示时会显示Z轴方向上的信息。
• preserve-3d 指示元素的子元素应位于 3D 空间中。

缩放

缩放的本质是对轴进行拉伸，他是一种对像素的增益，而不是直接修改了像素，也就是说显示像素=元素像素*增益

• transform: scaleX(2) 水平方向缩放
• transform: scaleY(3) 垂直方向缩放
• transform: scale(3) 双方向上的缩放
• transform: scaleZ(3)
  如果transform-style为默认情况，即flat，那么对于单个元素，此时scaleZ()是看不出效果的，因为这种元素他只是一个平面的概念，他是没有Z轴的，要看到Z轴的效果，就要将两个元素(也就是两个平面）利用position: absolute放置到相同x、y位置，然后旋转Y轴才看的出来两者的Z轴间隙。
  而单纯的给人看的时候，两者的像素一直都是不变的，因此单纯在平面是无法观测到的。

变形的原点

transform-origin，设定变形原点，所有的缩放均围绕变形原点进行变形：旋转、缩放均与该属性相关。

• center 默认值，在中心位置，偶数为n/2,奇数为n/2 + 1
• transform-origin: 0px 0px

变量

兼容性差；
css中有变量的概念，但是兼容性存在问题。

变量的定义、作用域和使用

定义

定义就是在一个元素中使用--key: value;进行定义

作用域

css定义的变量的作用域是当前元素以及当前元素的后代元素

使用

var(--key)

示例

<div class="parent-1">
    <div class="box-1">div>
    <div class="box-2">
        123
    div>
div>

运算

兼容性差
如width: calc(100px / 2);