HTML5CSS3--CSS3的各种用法

1.background-origin  背景图起点：

padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

2.background-clip  背景图裁剪：

border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

3.边框背景图：

border-image-source	背景图资源地址
border-image-slice	根据九宫格的（上 右 下 左）方式裁剪尺寸
border-image-width	边框背景图的尺寸
border-image-outset	边框背景图的位置
border-image-repeat	背景背景图是否平铺

4. box-shadow  盒子阴影属性(4行)：

水平偏移量（正数向右，否则反之）   上  右  下  左

垂直的偏移量（正数向下，否则反之）     上  右  下  左

模糊度  延伸值（可选）   上  右  下  左

颜色   内阴影（可选 inset）  上  右  下  左

5. text-shadow   文本阴影(1行)：

水平偏移量（正数向右，否则反之）  垂直的偏移量（正数向下，否则反之）    模糊度    颜色

6.linear-gradient 线性渐变：

   background-image: linear-gradient(
                to right,
                red,
                green
            );

效果图：

7.radial-gradient  径向渐变:

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

效果图:

8. transform  转换属性：

translateX(0px)	位移： translateX (属性值为正数向右、向下)
translateY(0px)	位移： translateY (属性值为正数向右、向下)
translateZ(0px)	位移： translateZ (属性值为正数向右、向下)
rotate3d(0,0,0,0deg)	旋转： rotate (属性值为正数顺时针)
scale(1)	缩放： scale(倍数)
skew(0deg)	角度倾斜： skew(角度)

9.transition  过度属性：

（1）  transition-property  用于规定设置过渡效果的CSS属性的名称：

none	没有属性会获得过渡效果
all	所有属性都将获得过渡效果
width	只有宽度过渡
height	只有高度过度
border-radius	圆角过渡

（2）  transition-duration  用于规定设置过渡效果的时间：

.5s

0.5s内过度

（3） transition-timing-function   设置速度曲线：

linear	匀速
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,)	贝塞尔曲线

贝塞尔曲线自定义网址：https://cubic-bezier.com/ 

（4）transition-delay   设置延长时间：

2s	过渡效果的延时时间为2s

10.动画：

animation-name	动画名称
animation-duration	动画持续的时间
animation-timing-function: linear	动画执行状态（匀速）
animation-delay	延迟执行动画
animation-iteration-count: infinite	执行动画的次数 (infinite 无限次)
animation-fill-mode	动画结束所在位置
animation-direction	执行动画的方向
animation-play-state: paused	停止执行动画