12.21知识点梳理

边框

圆角：border-radius属性

盒阴影：box-shadow属性

box-shadow：20px 20px 10px（模糊度） color（模糊颜色）

边界图片：border-image

border-image：url（图片） 宽 高 round；

round：平铺

stretch：拉伸

圆角

border-radius属性

指定每一个圆角

border-radius:15px(四个角都是15像素)

border-radius:15px 15px 15px 15px；

（左上角，右上角，右下角，左下角）顺时针顺序

border-radius:15px 15px；

（左上角和右下角；右上角和左下角）

border-radius:15px 15px 15px；

（左上角，右上角和左下角，右下角）

椭圆边角

border-radius：百分比；

border-radius：50px/15px；

(除数越小，弧度也越大)

圆形边角

可以使用圆角来显示用户头像

border-radius：50%；

照片多大，给的区域也就多大，不能超过图片的宽高

背景

background-image

不同的背景图像和图像要用逗号隔开，所有图片中显示在最顶端的为第一张。

background-size

background-size：100%（宽）100%（高）；

指定背景图像的大小

background-origin

指定了背景图像的位置区域

content-box（内容），padding-box（内边距）（默认值），border-box（边框）区域内可以放置背景图像

类名-padding{

background-origin：padding-box

}

类名-content{

background-origin：content-box

}

类名-border{

background-origin：border-box

}

<div class=“类名 类名-padding”><div/>

background-clip

背景剪裁属性是从指定位置开始绘制。

border-box（默认值），content-box，padding-box

过渡

为了添加某种效果可以从一种样式转变到另一个的时候。

要实现这种效果需要指定要添加效果的css属性，还要指定效果的持续时间。

transition： 2s；过渡的时间

多项改变

添加多个样式的变换效果，添加的属性由逗号分隔。

transform：rotate（0）（倾斜度）

transition： width 2s，height 2s，transform 3s；（过渡的时间）

（直接写过渡的时间也可以）

类名：hover{

（改变的效果）

width：200px；

height：200px；

transform：rotate（45deg）

}

速度曲线

transition-timimg-function：属性规定过渡效果的速度曲线。

ease -规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）

linear -规定从开始到结束具有相同速度的过渡效果

ease-in -规定缓慢开始的过渡效果

ease-out -规定缓慢结束的过渡效果

ease-in-out -规定开始和结束较慢的过渡效果

cubic-bezier（n，n，n，n）-允许您在三次贝塞尔函数中定义自己的值

延迟过渡效果

transition-delay：属性该规定过渡效果的延迟（以秒计）

transiton：width 2s linear 2s；

由简写：transiton-property：width；

transiton-duration：2s；

transition-timimg-function：linear；

transition-delay：2s；

动画

动画可以取代许多网页动画图像

动画使元素逐渐从一种样式变为另一种样式。

@keyframes规则

要使动画生效，必须将动画绑定到某一个元素。

@keyframes 类名{

from{

一开始的元素样式

        }

 to{

改变的元素样式

                }

        }

类名{

animation-name：类名；

animation-duration：2s；（必需）

}

“from”和“to”代表0%和100%

延迟动画

animation-delay：属性规定动画开始的延迟时间。

延迟也可以有负值。

运行次数

animation-iteration-count：播放次数；

反向或交替运行动画

animation-direction：属性指定是向前播放，向后播放还是交替播放动画。

normal -动画正常（向前）播放。默认值

reverse -动画以反方向播放（向后）

alternate -动画先向前播放，然后向后（需要和运行次数一起使用）

alternate-reverse -动画先向后播放，然后向

前（需要和运行次数一起使用）

速度曲线

animation-timimg-function：属性规定过渡效果的速度曲线。

ease -规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）

linear -规定从开始到结束具有相同速度的过渡效果

ease-in -规定缓慢开始的过渡效果

ease-out -规定缓慢结束的过渡效果

ease-in-out -规定开始和结束较慢的过渡效果

cubic-bezier（n，n，n，n）-允许您在三次贝塞尔函数中定义自己的值

填充模式

animation-fill-mode属性：影响开始之前和结束之后的元素

none -默认值。动画在执行之前或之后不会对元素应用任何样式。

forwards -元素保留由最后一个关键帧设置的样式（依赖 animation-direction和animation-iteration-count）

backwards -元素获取由第一个关键帧设置的样式值（取决于animation-direction），并在动画延迟期间保留该值。

both -动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。