共计 1797 个字符，预计需要花费 5 分钟才能阅读完成。
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 用于规定设置过渡效果的时间：
（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 |
停止执行动画 |
原文地址: HTML5CSS3–CSS3 的各种用法
正文完
