12.21笔记

### 
日期：12.21
    border-radius 圆角
    box-shadow 阴影
    border-image 边界图片：平铺round、拉伸stretch
    background-image 背景
    background-size 背景图片尺寸
    background-origin 属性：padding-box、center-box、border-box
    background-clip 属性：padding-box、center-box、border-box
    过度
        transition 将没有任何效果，因为默认值是 0。
        transition-timing-function` 属性规定过渡效果的速度曲线。
            ease` - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
            linear` - 规定从开始到结束具有相同速度的过渡效果
            ease-in` -规定缓慢开始的过渡效果
            ease-out` - 规定缓慢结束的过渡效果
            ease-in-out` - 规定开始和结束较慢的过渡效果
            cubic-bezier(n,n,n,n)` - 允许您在三次贝塞尔函数中定义自己的值
        transition-delay` 属性规定过渡效果的延迟（以秒计）。
        简写
            <style>
                div {
                  transition-property: width;
                  transition-duration: 2s;
                  transition-timing-function: linear;
                  transition-delay: 2s;
                }
                /* 简写 */
                div {
                  transition: width 2s linear 2s;
                }
            </style>

    动画
        @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式
        <style>
            /* 动画代码 */
            @keyframes example1 {
                from {
                    background-color: red;
                }
                to {
                    background-color: yellow;
                }
            }
            /* 应用动画的元素 */
            .example1 {
                animation-name: example1;
                animation-duration: 4s;
            }
        </style>
        animation-delay 属性规定动画开始的延迟时间。
        animation-iteration-count 属性指定动画应运行的次数。
        animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
            normal 动画正常播放（向前）。默认值
            reverse 动画以反方向播放（向后）
            alternate 动画先向前播放，然后向后
            alternate-reverse 动画先向后播放，然后向前
        animation-timing-function 属性规定动画的速度曲线。
            ease 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
            linear 规定从开始到结束的速度相同的动画
            ease-in 规定慢速开始的动画
            ease-out 规定慢速结束的动画
            ease-in-out 指定开始和结束较慢的动画
            cubic-bezier(*n*,*n*,*n*,*n*) 运行您在三次贝塞尔函数中定义自己的值
        简写
            <style>
                div {
                  animation-name: example;
                  animation-duration: 4s;
                  animation-timing-function: linear;
                  animation-delay: 2s;
                  animation-iteration-count: infinite;
                  animation-direction: alternate;
                }
                /* 简写 */
                div {
                  animation: example 4s linear 2s infinite alternate;
                }
            </style>