1. 图片原点

背景图默认填充的区域是 padding 及 content 区域，我们把左上角的padding起点叫做图片的原点。

图片填充整个盒子

background-size: cover;

图片是否换行

background-repeat: no-repeat;

设置背景图的原点为padding区域 : 默认值

background-origin: padding-box;

设置背景图的原点为border区域

background-origin: border-box;

设置背景图的原点为content区域

background-origin: content-box;

2. 图片裁剪

background-clip: 设置背景图的向外裁剪的区域；默认是border-box 只要超出border区域，则多余的部分会被裁减掉。

默认值：超出border区域会被裁减掉：

background-clip: border-box;

超出padding区域就会被裁减掉：

background-clip: padding-box;

超出内容区域就会被裁减掉：

background-clip: content-box;

注意： 如果想让背景图只呈现在文本上，则需要做以下几件事情：

设置文本颜色为透明：color: transparent;
给background-clip前面加上私有前缀 -webkit-：-webkit-background-clip: text;

3. 文本属性

white-space: pre；

该属性类似于pre标签，加上之后，内容会按照原来的写法来展示

white-space: nowrap;

文本不换行，使用频次相对较高

text-overflow: clip;

超出部分直接被裁减掉，注意，要想生效，必须添加overflow:hidden；

text-overflow: ellipsis;

超出部分显示省略号重点掌握

4. 渐变

4.1 线性渐变 background-image: linear-gradient();

渐变的原理其实就是一张背景图片，但是不需要引入图片的指定url的，而是使用内置的特殊的“图片”。

该属性可以实现渐变效果，默认是从上往下的渐变

background-image: linear-gradient(red, yellow, blue);

如果要改变线性渐变的方向，则需要使用关键词来处理 to

background-image: linear-gradient(to right, red, yellow, blue);
background-image: linear-gradient(to right top, red, yellow);

如果要改变线性渐变的方向，还能使用角度来处理,从中间画一条线，旋转30°。

background-image: linear-gradient( 30deg,red, yellow, blue);
background-image: linear-gradient(red, yellow, blue);

调整开始渐变的位置：这行代码意思是指：50px以前是纯红色，50px以后开始渐变，渐变到100px的时候，是纯黄色；然后继续渐变，150px及以后颜色是蓝色。

background-image: linear-gradient(red 50px, yellow 100px, blue 150px);

重复渐变

background-image: repeating-linear-gradient(red 50px, yellow 100px, blue 150px);

4.2 径向渐变

径向渐变：多个颜色之间的渐变，默认是从圆心开始往四周扩散，通常是指圆形或者椭圆形。

径向渐变：径是值半径的意思

background-image: radial-gradient(red, yellow, green);

设置圆心在左上角

background-image: radial-gradient(at left top, red, yellow, green);

设置圆心为x轴50px，y轴100px

background-image: radial-gradient(at 50px 100px, red, yellow, green);
background-image: radial-gradient(red, yellow, green);

调整渐变形状为正圆

background-image: radial-gradient(circle, red, yellow, green);

调整渐变的位置，意义与线性渐变相同

background-image: radial-gradient(red 20px ,yellow 50px, rgba(0,0,0,.4) 100px);

5. 2D

5.1 transform（位移）

2d位移可以改变元素的位置：

先给元素加上转换属性 transform
给transform具体的值：

translateX: => 设置水平方向位移，需要指定长度，如果是百分比，则参考自身的宽度;

transform: translateX(100px);

translateY: => 设置垂直方向位移，需要指定长度，如果是百分比，则参考自身的高度;

transform: translateY(50px);

translate : => 一个值代表水平方向，两个值代表水平和垂直方向；

transform: translate(100px , 50px);

注意：

位移与相对定位很像，都不会脱离文档流,不会影响到其他元素
与相对定位的区别：相对定位的百分比是参照的父元素，位移是参照的自身
浏览器对位移解析的时候，性能会更好，效率会更高
位移对行内元素无效
配合定位，可以实现元素水平垂直居中

面试点：如何让一个未知宽度和高度的子盒子实现水平垂直居中？

a：使用定位配合位移

父盒子设置相对定位
子盒子设置绝对定位，且 left50%,top50%
子盒子 transform: translate(-50%,-50%)

b：使用 flex布局

父盒子设置flex
父盒子加上 justify-content: center && align-items: center；

5.2 缩放

2D缩放是值：让元素放大或缩小

使用：

给元素加上transform属性
设置transform的值
scaleX : 设置水平方向的缩放比例，值为一个数字。1表示不缩放，维持原样。大于1等于放大，小于1等于缩小
scaleY : 设置垂直方向的缩放比例，值为一个数字。1表示不缩放，维持原样。大于1等于放大，小于1等于缩小
scale : 同时设置水平和垂直方向

div:hover {
            transform: scale(1.5);
        }

5.3 旋转

2d旋转：让元素在二维平面内，顺时针或者逆时针渲染

方法：

给元素添加转换属性 transform
编写具体值 rotate 正数是顺时针，负数是逆时针

 transform: rotateZ(1deg);

5.4 复合写法

这是复合写法，通常如果我们要写2d效果的时候，先写位移，再写缩放，最后再写旋转。否则可能会出现旋转之后中心点位置偏移的问题。

transform: translate(100px) scale(1.3) rotate(60deg);

6. 动画

动画：

关键帧: 指在构成一段动画的若干帧中，起决定性作用的那几帧。

使用动画：

定义关键帧 (定义动画)；
使用animation来调用动画动画名字 + 持续时间是必填的

简单定义动画

@keyframes : 声明一个动画语法；
pgm : 动画名字可以随便自定义

@keyframes pgm {
    from {
               
}

to {
   transform: scale(1.5); 
    }
}

复杂动画定义

@keyframes move2 {
            25% {
                background-color: skyblue;
            }

            50% {
                background-color: orange;
            }

            75% {
                background-color: blue;
                border-radius: 50%;
            }

            100% {
                background-color: yellowgreen;
                border-radius: 50%;
                transform: translate(100px);
        }
 }

几个必须调用动画的参数

必填：动画名字

 animation-name: move;

必填：持续时间

animation-duration: 2s;

设置动画的类型，可选

animation-timing-function: linear;

设置动画延迟时间，可选

 animation-delay: 0s;

设置动画的播放次数可选：值为number的时候，可以指定动画播放次数，也可以指定为infinite,无限次的意思。

animation-iteration-count: infinite;

设置动画方向，可选 normal默认值 reverse反方向 alternate 先正常再反向 alternate-reverse 先翻转再正常。

animation-direction: normal;

设置动画结束的状态 forwards: 动画结束时，保持最终定点状态 backwards 回到最开始状态。

animation-fill-mode: backwards;

复合写法

animation: move2 3s linear infinite alternate;

设置动画播放状态， running代表播放， paused代表暂停。

div:hover {
   animation-play-state: paused;
 }

6.1 练习

利用动画和2d来实现轮播图模型

核心在于控制main这个盒子的滚动，最外层wrapper还是需要保持固定；所以flex要加在mian中。

而且，滚动到最后一个盒子的时候，会有一个盒子的空白距离，所以，把第一个盒子复制一份放到最后，就刚好可以弥补这个空白距离；当空白距离滚动结束之后，动画也完成了一次循环，所以第一张图又会从起点开始滚动，刚好能够衔接上。

<style>
.wrapper {
    margin: auto;
    width: 300px;
    height: 100px;
    border: 1px solid red;
    overflow: hidden;
           
}

.main {
     display: flex;
     animation: move 6s linear infinite;
}
.box {
   flex-shrink: 0;
   width: 300px;
   height: 100px;
}

.inner1 {
    background-image: linear-gradient(yellow,green,skyblue);
}

.inner2 {
    background-image: linear-gradient(pink,purple);
}

.inner3 {
     background-image: linear-gradient(red, orange);
}

@keyframes move {
    from {
            
}


    to {
       transform: translateX(-900px);
     }
}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="main">
            <div class="inner1 box">盒子1</div>
            <div class="inner2 box">盒子2</div>
            <div class="inner3 box">盒子3</div>
            <div class="inner1 box">盒子1</div>
        </div>
    </div>
</body>

7. 过渡

transition： 过渡可以在不使用动画的情况下，让元素从一种样式平滑过渡到另一种样式。

特别注意： 哪个元素需要过渡，就加在哪个元素身上，而不是hover；持续时间和需要过渡的元素是必填的。

需要过渡的属性，多个值以逗号分隔。

transition-property: width,background-color;

过渡持续时间

transition-duration: 1s;

延迟时间

transition-delay: 1s;

过渡类型

transition-timing-function: linear;

复合写法

transition: all 1s;

分享几个css3里面常用的基本属性渐变，2D，动画