HTML中的边框、背景、过度、动画

1.边框

1.1border-radius

• border-radius: 15px 50px 30px 5px;：左上角为15px，右上角为50px，右下角为30px，左下角为5px。

• border-radius: 15px 50px 30px;：左上角为15px，右上角和左下角为50px，右下角为30px。

• border-radius: 15px 50px;：左上角和右下角为15px，右上角和左下角为50px。

• border-radius: 15px;：四个角都是15px。

1.2box-shadow

*box-shadow 属性接受值最多由五个不同的部分组成。 box-shadow: offset-x offset-y blur spread color position;

对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }

1.3border-image

语法：border-image:source slice repeat

source:所用图像的url地址；
slice:1~4个长度值（或者百分比），用于设置图片在每一条边上的距离（区域）；
repeat：1~2个关键字，用于设置图片在水平方向和竖直方向的重复方式。取值有以下四种：
    stretch：默认值，将图片进行拉伸以填充边框的长
    repeat：沿边框长平铺图片 （重复） 
    round：沿着边框的长整数次的平铺图片（元素可能被自动调整大小以适应该要求）（平铺）
    space：沿着边框的长整数次的平铺图片（如果图片不能填满元素，则使用空白填充）（拉伸）

2.背景

background

2.1background-size

如设置的宽高或者百分比大于图片的宽高，图片则会拉伸，然后平铺填满整个盒子； 如设置的宽高或者百分比小于图片的宽高，图片则会压缩，然后平铺填满整个盒子； cover会将图片放至足够大，以至完全填满整个盒子； contain会将图片放至刚好合适整个盒子的位置，然后平铺填满整个盒子

2.2background-repeat: no-repeat.

此项共有五个属性:repeat(平铺)/no repeat(不平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)/inherit(父级继承).

repeat:背景图片会按照自身尺寸铺满整个父级元素,当自身尺寸比父级元素大时,则会显示一部分.

no-repeat:顾名思义,背景图片会根据自身尺寸单张出现在父级元素,不会铺满.

repeat-x:背景图片根据自身尺寸沿x轴铺满.

repeat-y:背景图片根据自身尺寸沿y轴铺满.

inherit:指定background-repeat属性设置应该从父元素继承.

2.3background-position(背景位置):

1.background-position:left top;(数值不分前后,根据方向划分.)

2.百分比-如:background-position:x% y%;(第一个值是水平位置，第二个值是垂直.左上角是0％0％.右下角是100％100％.如果仅指定了一个值，其他值将是50％.默认为0% 0%)

3.数值式-如:background-position:0px 0px;(第一个值是水平位置，第二个值是垂直.左上角是0.单位可以是像素（0px0px）或任何其他 CSS单位.如果仅指定了一个值，其他值将是50％.百分比、数值可混用)

4.inherit:指定background-repeat属性设置应该从父元素继承.

2.4background-clip 和 background-origin

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。 默认值: border-box

background-clip: border-box|padding-box|content-box;

border-box 默认值。背景绘制在边框方框内（剪切成边框方框，但是在边框下层） padding-box 背景绘制在内边距（padding）外沿方框内（剪切成衬距方框）。 content-box 背景绘制在内容方框内（剪切成内容方框）

text 背景被裁剪成文字的前景色

background-origin属性指定background-position属性应该是相对位置。 background-origin 规定了指定背景图片background-image属性的原点位置的背景相对区域.

注意：如果背景图像background-attachment是"固定"，这个属性没有任何效果。

padding-box 默认值。背景图像填充框的相对位置 border-box 背景图像边界框的相对位置 content-box 背景图像的相对位置的内容框

2.5background-attachment

决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

scroll 背景图片随着页面的滚动而滚动，这是默认的。背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的），如果元素本身滚动，背景跟随滚动。 ​ fixed 背景图片不会随着页面的滚动而滚动。背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动. ​ local 背景图片会随着元素内容的滚动而滚动。背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

3.过度——transition

transition是 transition-property ， transition-duration ，transition-timing-function 和 transition-delay 的一个简写属性。这四个属性分别表示过渡或动态模拟的CSS属性、完成过渡所需要的时间、完成动画所使用的的过渡函数、过度开始时出现的延迟时间。

3.1property：

none | all | property；分别表示没有属性会获得过渡效果、全部属性都获得过渡效果、定义应用过渡属性的CSS属性名称列表，列表以逗号隔开

3.2duration

transition-duration：time；该属性表示你的动画所需要的时间。

3.3timing-function

transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

linear表示以规定的速度开始至结束的过渡效果。相当于cubic-bezier(0，0，1，1);
ease表示以规定慢速开始，然后变快、然后慢速结束的过渡效果。相当于cubic-bezier(0.25，0.1，0.25，1);
ease-in表示以慢速开始的过渡效果。相当于cubic-bezier(0.42，0，1，1);
ease-out表示以慢速结束的过渡效果。相当于cubic-bezier(0，0，0.58，1);
ease-in-out表示以慢速开始和结束的过渡效果。相当于cubic-bezier(0.42，0，0.58，1);
cubic-bezier(n,n,n,n)可以定义自己的值，可能的值在0-1之间

3.4delay

transition-delay：time；表示动画开始时的延迟时间。

4.动画

4.1@keyframes(关键帧) 定义动画

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列 在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。 请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%

属性	描述
animation	所有动画属性的简写属性，除了 animation-play-state属性
animation-name	制定需要使用的动画（ 必须的 ）
animation-duration	规定动画完成一个周期所花费的秒或毫秒( 必须的 )
animation-timing-function	规定动画的速度曲线，默认是"ease"”。
aniamtion-delay	规定动画何时开始，默认是0.
animation-iteration-count	规定动画被播放的次数，默认是1,还有 infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是" normal" alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是" running" 还有’ paused 暂停.
animation-fill-mode	规定动画结束后状态，保持 forwards 回到起始 backwards

暂停动画： animation-play-state: paused;经常和鼠标经过等其他配合使用 想要动画走回来，而不是直接跳回来： animation- direction: alternate 盒子动画结束后，停在结束位置： animation- fill-mode: forwards

4.2 解析 aniamtion-direction

动画是否逆向播放

aniamtion-direction: norma | reverse | alternate | alternate-reverse normal 默认的 reverse 从终点运动向起点 终点=>起点 alternate 到达终点后是否原路返回( 起点=>终点=>起点 ) 当 animation-iteration-count < 2 时无效 alternate-reverse 终点=>起点=>终点 animation-iteration-count < 2 时无效

4.3 解析 animation-fill-mode

动画结束后状态

• aniamtion-fill-mode:forwards | backwards| none

  • forwards 保持当前位置 获取最后的动画样式

  • backwards 回到初始位置 获取最开始的动画样式

  • none 默认值

4.4 animation-timing-function

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画以低東开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps	指定了时间函数中的间隔数量（步长）

** steps 理解为动画从头到尾，需要多少步来完成。**

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状太;

• 简写属性里面不包含 animation- play-state