失眠网 > 1.CSS3 教程-＞多列布局＞ image模块＞ cssTransition 过渡＞ CSS Animations 动画＞ Transform二维

1.CSS3 教程-＞多列布局＞ image模块＞ cssTransition 过渡＞ CSS Animations 动画＞ Transform二维

时间：2019-07-26 17:24:19

CSS3 教程

多列布局
image模块
cssTransition 过渡
CSS Animations 动画
Transform二维

介绍

CSS3 是层叠样式表（Cascading Style Sheets）语言的最新版本，旨在扩展CSS2.1。

它带来了许多期新特性，例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式，如 multi-columns 、 flexible box 与 grid layouts。

CSS Level 2 经历了 9 年的时间（从 2002 年 8 月到年 6 月）才达到推荐状态，主要原因是被一些次要特性拖了后腿。为了加快那些已经确认没有问题的特性的标准化速度，W3C 的 CSS 工作组作出了一项决定，将 CSS 划分为许多小组件，称之为模块。这些模块彼此独立，按照各自的进度来进行标准化。其中一些已经是 W3C 推荐状态，也有一些仍是 early Working Drafts（早期工作草案）。当新的需求被肯定后，新的模块也会同样地添加进来。

从形式上来说，CSS3 标准自身已经不存在了。每个模块都被独立的标准化，现在标准 CSS 包括了修订后的 CSS2.1 以及完整模块对它的扩充，模块的 level（级别）数并不一致。可以在每个时间点上为 CSS 标准定义一个 snapshots（快照），列出 CSS 2.1 和成熟的模块。

颜色模块

opacity

概念：opacity属性指定了一个元素的不透明度。当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。

语法：opacity接受一个0.0到1.0范围内的数字值,这个数值既包含也代表通道的透明度

.box {opacity: 0.5}

currentColor

概念：currentColor 关键字代表元素文本颜色 color属性的属性值。它还用于为接受颜色值的任何其他属性提供潜在的默认值（currentColor）。

注意：如果在“color”属性本身上设置了“currentColor”关键字，则它将被视为“color:inherit”。

<div style="color:blue;background-color: red; border: 1px dashed currentcolor;">The color of this text is blue.<div style="background:currentcolor; height:9px;"></div>This block is surrounded by a blue border.</div>

增加：

hsl()，hsla()，rgba()和rgb()函数来创建颜色transparent 颜色目前是真彩色并且是 rgba(0,0,0,0.0) 的别名。

废弃：system-color keywords(系统颜色关键字) /css3/appendix/color-keyword.html，它们已经不能在生产环境中使用。

选择器

增加

子串匹配的属性选择器， E[attribute^=“value”]， E[attribute$=“value”]， E[attribute*=“value”]。新的伪类：:target， :enabled 和 :disabled， :checked， :indeterminate， :root， :nth-child 和 :nth-last-child， :nth-of-type 和 :nth-last-of-type， :last-child， :first-of-type 和 :last-of-type， :only-child 和 :only-of-type， :empty，和 :not。伪元素使用两个冒号而不是一个来表示：:after 变为 ::after， :before 变为 ::before， :first-letter 变为 ::first-letter，还有 :first-line 变为 ::first-line。新的兄弟选择器： h1~pre。

命名空间模块

介绍：@namespace 是用来定义使用在CSS样式表中的XML命名空间的@规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。常用在HTML内联SVG中使用。

注意：任何 @namespace 规则都必须在所有的 @charset 和 @import 规则之后, 并且在样式表中，位于其他任何样式声明之前。

概念：

@namespace 可以用来定义默认命名空间。当定义过默认命名空间后, 所有的通配选择器和类型选择器（但不包括属性选择器）都只应用在这个命名空间的元素中。@namespace 规则也可以用于定义命名空间前缀。当一个通配、类型、属性选择器前面有命名空间前缀修饰时，这个选择器将只匹配那些命名空间与元素名或属性匹配的元素。

注意：Note: 在 XML中元素的属性没有命名空间，所以CSS中的默认命名空间不会加到属性选择器中。除非将命名空间前缀显示的定义在元素指定属性上如xlink:href这样href属性才拥有命名空间。

语法：

/* 默认命名空间 */@namespace url(XML-namespace-URL);@namespace "XML-namespace-URL";/* 命名空间前缀 */@namespace prefix url(XML-namespace-URL);@namespace prefix "XML-namespace-URL";

示例：

/* 指定命名空间为 XHTML */@namespace url(/1999/xhtml);@namespace svg url(/2000/svg);/* 匹配所有的XHTML <a> 元素, 因为 XHTML 是默认无前缀命名空间 */a {}/* 匹配所有的 SVG <a> 元素 */svg|a {}/* 匹配 XHTML 和 SVG <a> 元素 */*|a {}

媒体查询

介绍：将之前的媒体类型扩充为完整的语言

样式属性

介绍：正式定义了 HTML 元素 style 全局属性内容的语法。

背景和边框模块

多背景图片。

. box {background-image: url(flower.png), url(ball.png), url(grass1.png);background-position: center center, 20% 80%, top left;background-origin: border-box, content-box, border-box;background-repeat: no-repeat, no-repeat, no-repeat;}

background-repeat 属性增加 space 和 round 值。

spance：在不被剪切的情况下，将图像重复尽可能适合背景定位区域的次数，然后将图像隔开以填充该区域。第一张和最后一张图像触及该区域的边缘。如果背景绘画区域大于背景定位区域，则图案将重复以填充背景绘画区域。除非在该方向上没有足够的空间容纳图像的两个副本，否则将忽略该方向的背景位置值，在这种情况下，仅放置一张图像，并且背景位置确定其在该方向上的位置。

round: 随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像。当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间。

background-attachment 属性增加 local。

local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

background-origin，background-size 和 background-clip 属性。

支持带弧度的边框角属性：

介绍：CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

注意：该属性是一个简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。

语法

格式：[属性值]{1，4} [/ [属性值]{1，4}]？

第一个值表示水平方向半径长度可以重复 1 至 4 次，第二个值表示垂直方向可选值如果不设置则与第一组值相同，如果设置可以重复 1 至 4 次。
属性值：

- 长度单位：定义圆形半径或椭圆的半长轴，半短轴。负值无效。- 百分比：使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。

.box1 {border-radius: 3em;/* 等价于： */border-top-left-radius:3em;border-top-right-radius: 3em;border-bottom-right-radius: 3em;border-bottom-left-radius: 3em;}.box1 {border-radius: 2em 4em 7em 6em;/* 等价于： */border-top-left-radius:2em;border-top-right-radius: 4em;border-bottom-right-radius: 7em;border-bottom-left-radius: 6em;}.box3 {border-radius: 1em / 5em;/* 等价于： */border-top-left-radius:1em 5em;border-top-right-radius: 1em 5em;border-bottom-right-radius: 1em 5em;border-bottom-left-radius: 1em 5em;}.box4 {border-radius: 4px 3px 6px / 2px 4px;/* 等价于： */border-top-left-radius:4px 2px;border-top-right-radius: 3px 4px;border-bottom-right-radius: 6px 2px;border-bottom-left-radius: 3px 4px;}

支持边框使用image：

border-image-source：属性用于声明元素的边框图片（border-image）的资源

.box {width: 200px;height: 150px;border: 30px solid #ccc;border-image-source: url("/group1/M00/00/E0/wKgA3V_R1S6AW_pfAAABqFnWyPc866.png");}

注意，若 border-image-source 的值为 none 或者图片不能显示，则将应用 border-style。

border-image-slice：属性被用于切割资源图片的区域，然后将其动态的应用到最终的边框图片

介绍：通过border-image-source 引用边框图片后，border-image-slice属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。

1. 区域 1-4 为角区域（corner region）。每一个都用一次来形成最终边界图像的角点。2. 区域 5-8 边区域（edge region）。在最终的边框图像中重复，缩放或修改它们以匹配元素的尺寸。3. 区域 9 为中心区域（ middle region）。它在默认情况下会被丢弃，但如果设置了关键字fill，则会将其用作背景图像。注意：中间的区域将不会被边框使用，但当设置有 fill 关键词时将会被作为 background-image。这个关键词可以被设置在属性的前面或后面。

语法：该属性可以接受数字（像素）或百分比（图片自身相对大小）作为属性值

.box {/* 所有的边 */border-image-slice: 30; /* 垂直方向 | 水平方向 */border-image-slice: 10% 30%;/* 顶部 | 水平方向 | 底部 */border-image-slice: 30 30% 45;/* 上右下左 */border-image-slice: 7 12 14 5; /* 使用fill*/border-image-slice: 10% 7 12 fill;}

border-image-width：指定了边界图像 (border image) 的宽度，如果本属性值大于元素的 border-width，边界图像将会向 padding 边缘延展。

语法：该属性可以接受长度单位（px、rem等）、数字（边框宽度的相应倍数，不能为负）、百分比（相较于水平（垂直）方向上的边框图像区域宽度（高度）的偏移量，不能为负）或 auto 作为属性值。

. box {/* 关键字 */border-image-width: auto;/* 长度 */border-image-width: 1rem;/* 百分比 */border-image-width: 25%;/* 数值 */border-image-width: 3;/* 垂直 | 水平 */border-image-width: 2em 3em;/* 上 | 横向 | 下 */border-image-width: 5% 15% 10%;/* 上 | 右 | 下 | 左 */border-image-width: 5% 2em 10% auto;}

border-image-outset：属性定义边框图像可超出边框盒的大小，默认值为0。

语法：该属性可以接受长度单位（px、rem等）、数字（边框宽度的相应倍数，不能为负）作为属性值。

.box {border-image-outset: 30px;/* border-image-outset:垂直水平 */border-image-outset: 10px 30px;/* border-image-outset: 顶水平底 */border-image-outset: 30px 1 45px;/* border-image-outset:顶右底左 */border-image-outset: 7px 12px 14px 5px;}

border-image-repeat：定义图片如何填充边框。

概念：该属性值可为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。可设置属性有：

- stretch 拉伸图片以填充边框。（默认值）

- repeat 平铺图片以填充边框。

- round 平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。

- space 平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）

.box1 {border-image-source: url("/group1/M00/00/E0/wKgA3V_R1S6AW_pfAAABqFnWyPc866.png");border-image-slice: 100%;border-image-width: 1;border-image-outset: 0;border-image-repeat: stretch}

border-image：就是border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat简写。

语法：

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

示例：

.box2 {border-image: url("/images/border.png") 30 30 repeat;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XtoAkyJj-1630398831420)(/yws/res/14522/FE976DDDF091478197540EDCD3C9BF5F)]

box-shadow:

概念：该属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

语法：inset? <x偏移量> <y偏移量> [<阴影模糊半径>? <阴影扩散半径>]? <颜色>？

inset：会使得阴影落在盒子边框之内(即使是透明边框),如果没有指定inset，默认阴影在边框外，即阴影向外扩散x偏移量、y偏移量：这是box-shadow属性前两个长度值，用来设置阴影偏移量可以为负。阴影模糊半径：这是box-shadow属性的第三个长度值。值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，阴影扩散半径：这是box-shadow属性的第三个长度值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0颜色：指定阴影的颜色，不同浏览器默认颜色值可能会不同

. demo {/* x偏移量 | y偏移量 | 阴影颜色 */box-shadow: 60px -16px teal;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */box-shadow: 10px 5px 5px black;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */box-shadow: inset 5em 1em gold;/* 任意数量的阴影，以逗号分隔 */box-shadow: 3px 3px red, -1em 0 0.4em olive;}

多列布局

介绍： CSS新增简单的多列布局，可以将文本内容设计成像报纸一样的多列效果。

column-width

概念：该属性设置多列布局中的理想列宽。在列的宽度不小于列宽值时创建尽可能多的列，如果容器的宽度小于指定的值，则单个列的宽度将小于声明的列的宽度。该属性可能的值：

长度值：表示最佳列宽。实际列宽可能与指定的值不同，当需要填充可用空间时，列宽可能会变宽，当可用空间太小时，列宽可能会变窄。该值不能为负或百分比。auto（默认值）：列的宽度将有其他属性决定，如column-count.

p {width: 300px;border: 1px solid #ccc;column-width: 80px;}

column-count

概念：该属性用来描述元素的列数，可能的值：

number：是个严格的正整数，用来描述元素内容被划分的理想列数。假如 column-width也被设置为非零值，此参数仅表示所允许的最大列数。auto（默认值）：用来表示列的数量由其他CSS属性指定，例如 column-width。

p {width: 300px;border: 1px solid #ccc;column-count: 3;}

columns

概念：该属性是column-width 和 column-count 属性的简写属性，任何省略的子值都将设置为其初始值。

/* Column width */columns: 18em;/* Column count */columns: auto;columns: 2;/* Both column width and count */columns: 2 auto;columns: auto 12em;columns: auto auto;

column-fill

概念：属性控制如何将内容划分为列。内容是平衡的，这意味着在所有列的内容将有相同的高度，或者，当使用自动，只占空间的内容需要。可能的值：

balance：会以大约相同的内容量填充各列，但不允许这些列的高度超过height。您可能会发现，height随着浏览器水平地均匀分配内容，这些列的长度将变短。auto：会填充每一列，直到到该列height填满为止。所以此值不一定会填充所有列，也不一定会均匀填充。

.example {columns: 4;height: 105px;border: 1px solid rgba(0, 0, 0, 0.1);padding: 0 0.5em;}

column-gap

概念：column-gap属性在Grid，Flexbox和Columns布局中，用来设置列之间设置空间（也称为“装订线”）。

.box {column-gap: normal; /* <length> values */column-gap: 3px;column-gap: 2.5em;/* <percentage> value */column-gap: 3%;/* Global values */column-gap: inherit;column-gap: initial;column-gap: unset;}

column-rule

介绍：类似于border属性，用来指定在每列列间隙的中心添加一条垂直线。

概念：该属性是column-rule-width、column-rule-style、column-rule-color的简写。这三个属性的属性值与border属性相同。

.container {columns: 2 400px;column-rule: 1px solid black;}/* 等价于 */.container {columns: 2 400px;column-rule-color: black;column-rule-style: solid;column-rule-width: 1px}

column-span

介绍：在多列布局中，您可以使用column-span来使元素跨列扩展。可能的值：

all：的值被设置为all时，可以让一个元素跨越所有的列。none：元素不跨多个列。

.p {column-span: all;}

「课堂练习」

使用多列布局实现下面效果
html结构:

<div class="example"><h1>A</h1><ul><li>aardvark</li><li>aardwolf</li><li>aasvogel</li><li>abacuses</li><li>abalones</li></ul><hr><h1>B</h1><ul><li>baalisms</li><li>baaskaap</li><li>baaskaps</li><li>baasskap</li><li>babassus</li></ul><hr><h1>C</h1><ul><li>cabalism</li><li>cabalist</li><li>caballed</li><li>cabarets</li><li>cabbaged</li></ul></div>

image模块图片渐变

linear-gradient()

介绍：函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的图片数据类型。

.box {/* 渐变轴为45度，从蓝色渐变到红色 */linear-gradient(45deg, blue, red);/* 从右到左、从绿色渐变到粉色 */linear-gradient(to left, green, pink);/* 从右下到左上、从蓝色渐变到红色 */linear-gradient(to left top, blue, red);/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */linear-gradient(0deg, blue, green 40%, red);/* 允许设置多个渐变 */background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);}

语法：linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )

angle 用角度值指定渐变的方向（或角度）。角度顺时针增加。side-or-corner 描述渐变线的起始点位置。它包含to和两个关键词：第一个指出水平位置left or right，第二个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的。

to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。color-stop-list 由多个color-stop，每个color-stop 由一个颜色值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的）。

repeating-linear-gradient()

介绍：这是一个类似 linear-gradient 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个<gradient>数据类型的对象, 这是一个特殊的图片数据类型。

#grad1 {background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%,rgb(100,100,100) 10%);}

radial-gradient()

介绍：函数用于创建一个从原点发出的两种或者多种颜色之间颜色径向渐变的图片。其结果属于<gradient>数据类型，是一种特别的图片数据类型。

.box {/* 从容器中心向外径向渐变，渐变形状为与容器相切的椭圆，从蓝色渐变到红色 */background: radial-gradient(blue, red); /* 以容器x 0% y 30% 为中心点向外径向渐变，从蓝色渐变到黄色再到蓝色 */background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); /* 以容器x 100% y 50% 中心向外径向渐变*/background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%); /* 从容器中心渐变渐变圆半径为50px正圆向外径向渐变*/ background: radial-gradient(circle 50px,red, yellow 10%, #1e90ff 50%, beige);/* 从容器中心渐变渐变椭圆 x半径为50% 轴半径为50px正圆向外径向渐变*/ background: radial-gradient(ellipse 50% 50px,red, yellow 10%, #1e90ff 50%, beige);/* 从中心向外径向渐变，渐变的边缘形状与容器距离渐变中心点最近的一边相切 */background: radial-gradient(closest-side, blue , #fff, orange);/* 渐变的边缘形状与容器距离40px 40px点最远的一个角相交。颜色从白到蓝 */background-image: radial-gradient(farthest-corner at 40px 40px,#f35 0%, #43e 100%); /* 渐变的正圆边缘形状与容器距离25px 75px点最近的一个角相交 */background: radial-gradient(circle closest-side at 25% 75%,red, yellow 10%, #1e90ff 50%, beige); /* 允许设置多个渐变 */background: radial-gradient(ellipse at top, #e66465, transparent),radial-gradient(ellipse at bottom, #4d9f0c, transparent);}

语法：

radial-gradient([ [ circle || <length> ][ at <position> ]? , |[ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |[ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |at <position> ,]?<color-stop-list> )radial-gradient( <color-stop-list> )radial-gradient( at <position> , <color-stop-list> )radial-gradient( [ circle || <length> ] [ at <position> ]? , <color-stop-list> )radial-gradient( [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , <color-stop-list> )radial-gradient( [ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , <color-stop-list> )

position：径向渐变起始点与background-position或者transform-origin类似。如缺省，默认为中心点。渐变的形状：。渐变的形状是一个半径不变的正圆 circle，或椭圆形（轴对称椭圆）ellipse 。默认值为椭圆。length：渐变渐变的尺寸大小extent-keyword：关键字用于描述边缘轮廓的具体位置。以下为关键字常量： closest-side：渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。closest-corner：渐变的边缘形状与容器距离渐变中心点最近的一个角相交。farthest-side：与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。farthest-corner：渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

repeating-radial-gradient()。

介绍：它类似于radial-gradient 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。其结果属于<gradient>数据类型，是一种特别的图片数据类型。

.box {background: repeating-radial-gradient(circle at center, red 0, blue, green 30px);}

CSSvalue和单位模块

介绍：

使 initial（元素的默认值）和 inherit（父元素的计算值）关键字能够被用于任意 CSS 属性中。定义了新的相对字体长度单位：rem 和 ch。定义了相对视口长度单位：vw，vh，vmax 和 vmin[当前 vw 和 vh 中较小的一个值] 。定义<angle>，<time>，<resolution>。规范<color>，<image>和<position>定义的值。

弹性盒模型布局

介绍：为 CSS display 属性增加了 flexbox layout(伸缩盒布局) 及多个新 CSS 属性来控制它。

CSS条件规则模块

介绍：增加了对样式表部分内容进行条件处理的功能，若浏览器或文档的能力符合条件，则该部分的样式生效。它主要是允许了在 @media 中嵌套 @ 规则。

@supports：该规则可以指定中的一个或多个特定的CSS功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，可以在任何其他条件组规则中互相嵌套。

@supports (display: grid) {div {display: grid;}}@supports not (display: grid) {div {float: right;}}@media screen and (min-width: 900px) {@supports (display: flex) {article {display: flex;}}}

语法：@supports 由一组样式声明和一条支持条件构成。支持条件由一条或多条使用逻辑与（and）、逻辑或（or）、逻辑非（not）结合的名称-值对（name-value pair）组成。可以使用圆括号调整操作符的优先级

@supports (display: grid) and (not (display: inline-grid)) {}

DOM 方法 CSS.supports()

介绍：静态方法返回一个Boolean值，用来校验浏览器是否支持一个给定的CSS特性。

boolValue = CSS.supports(propertyName, value);CSS.supports("display", "flex")boolValue = CSS.supports('@supports条件语句'); // CSS.supports("(display: grid) and (not (display: inline-grid))")

文本修饰模块

text-shadow

介绍：为文字添加阴影。可以为文字添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

p {text-shadow: #FC0 1px 0 10px;}

语法：<length>{2,3} && <color>?

1. offset-x、offset-y 作为该属性的前两的长度值指定阴影相对文字的偏移量

2. blur-radius 模糊半径，作为该属性第三个可选长度值，默认为0。值越大，阴影也就越大越淡。

3. color 可选值，字体阴影的颜色不同浏览器默认颜色可能会有不同。

字体模块

@font-face

介绍：这是一个叫做@font-face 的CSS @规则，它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则的条件规则组中。

语法：

@font-face {[ font-family: <family-name>; ] ||[ src: <src>; ] ||[ unicode-range: <unicode-range>; ] ||[ font-variant: <font-variant>; ] ||[ font-feature-settings: <font-feature-settings>; ] ||[ font-variation-settings: <font-variation-settings>; ] ||[ font-stretch: <font-stretch>; ] ||[ font-weight: <font-weight>; ] ||[ font-style: <font-style>; ]}

font-family：所指定的字体名字将会被用于font或font-family属性src：远程字体文件位置的URL或者用户计算机上的字体名称，可以使用local语法通过名称指定用户的本地计算机上的字体( src: local(‘Arial’); )。如果找不到该字体，将会尝试其他来源，直到找到它。font-variant 设置当前自定义字体是大小写描述。font-stretch 设置当前自定义字体的伸缩变形描述。font-weight 设置当前自定义字体的粗细描述。font-style：对于src所指字体的描述。如果所需字体符合描述，则采用本font-face所定义的字体。

@font-face {font-family: '毛笔字';src: url('李旭科书法1.4.ttf') format('truetype');font-weight: normal;font-style: normal;}@font-face {font-family: '毛笔字';src: url('李旭科书法1.6.ttf') format('truetype');font-weight: normal;font-style: oblique;}div {font-size: 18px;font-family: '毛笔字'; font-style: oblique; /* 使用第二个自定义字体，因为他们的 font-family font-style描述一致 */}

CSS Transitions

介绍：CSS3 新增了动画属性实现为一个元素在不同状态之间切换的时候定义不同的过渡动画效果。

transition-property

介绍：该属性指定元素那个属性状态发生变化时产生过渡效果，该属性支持多重值每个值使用逗号’,'隔开。可以设置的值有：

none：没有任何属性需要过渡all：所有属性发生改变是都会表现出过渡动画。css属性名：指定元素特定属性名的状态发生变化产生过渡动画。

.box {transition-property: none;transition-property: all;transition-property: background-color;transition-property: width, height, color;}

transition-duration

介绍：该属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。

.box {transition-property: all;transition-duration: 5s;}.box {transition-property: width, height, color;transition-duration: 5s, 2s, 300ms;}

transition-delay

介绍：该属性规定了在过渡效果开始作用之前需要等待的时间。可以指定多个延迟时间，每个延迟时间会被应用到由transition-property指定的对应属性上。

.box {transition-property: all;transition-duration: 5s;transition-delay: 1s;}.box {transition-property: width, height, color;transition-duration: 5s, 2s, 300ms;transition-delay: 300ms, 100ms, 500ms;}

transition-timing-function

介绍：该属性接受一个描述过渡动画加速度曲线的函数，从而实现控制整个过渡动画在每一时间点的速度。可以指定多个速度曲线的函数，每个速度曲线的函数会被应用到由transition-property指定的对应属性上。可接受的值有：

cubic-bezier(x1,y1,x2,y2)：使用 cubic-bezier （三次贝塞尔曲线）函数自己动画的过渡曲线值。该函数接受两个控制点坐标为参数，控制线段（0,0）（1,1）变成一条贝塞尔曲线（曲线斜率越大动画速度越快）。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)）。steps(number, direction)：将过渡分割成段，而不是以平滑形式过渡，该方法接受两个参数：参数一：将整个状态变化拆分成几段过渡状态参数二：动画过渡顺序可选值为end（默认值）第一帧是动画开始的时候状态一步步到结束状态。start 第一帧是动画结束的时候状态一步步到开始状态

.box {transition-property: width, height, color;transition-duration: 5s, 2s, 300ms;transition-delay: 300ms, 100ms, 500ms;transition-timing-function: ease, cubic-bezier(0.25, 0, 0.75, 0.8), steps(4, start);}

transition

介绍：transition CSS 属性是transition-property，transition-duration，transition-timing-function和transition-delay的一个简写属性。

.box1 {transition: margin-right 2s;}.box2 {transition: all 0.5s linear;}/* 过渡时长2s 延迟.5s */.box3 {transition: margin-right 2s .5s;}/* 过渡时长2s 延迟.5s */.box1 {transition: margin-right 2s ease-in-out .5s;}.box4 {transition: margin-right 2s, color 1s, background-color .5s ease-in .3s;}

transitionend 事件

介绍：该事件会在DOM元素 CSS transition 结束后触发。如在transition完成前设置 display 为"none"，事件不会被触发。

/** 在指定的元素上监听transitionend事件, 例如#slidingMenu* 然后指定一个函数, 例如 showMessage()*/function showMessage() {console.log('Transition 已完成');}var element = document.getElementById("slidingMenu");element.addEventListener("transitionend", showMessage, false);

CSS Animations

介绍：允许定义动画效果，借助于新增的 CSS animation， animation-delay， animation-direction， animation-duration， animation-fill-mode， animation-iteration-count， animation-name， animation-play-state，和 animation-timing-function 属性，以及 @keyframes @ 规则。

`关键帧 @keyframes`

概念：关键帧 @keyframes 规则通过在动画序列中定义关键帧的样式来控制CSS动画序列中的中间步骤。和 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。

@keyframes slidein {from {color: red; }to {color: blue;}}

语法：

@keyframes <keyframes-name> {[<keyframe-selector>[,<keyframe-selector>]+ {<declaration-list>}]+}

keyframes-name：关键帧集合名，即当前@keyframes 规则的名称，以便后续使用 animation-name 属性将动画同其关键帧声明匹配。keyframe-selector：当前@keyframes 规则动画序列中触发关键帧的时间点：百分比使用百分比表示整个动画过程中某一时间点。from 动画的第一帧等价于 0%。to 动画的最后一帧 100%。 declaration-list：css样式列表，描述在动画序列中指定帧的css样式

注意：关键帧中出现的 !important 将会被忽略。

`animation-name`

概念：animation-name属性指定所应用的由 @keyframes 定义的一系列动画序列，每个动画名用逗号隔开。该属性可接受的属性值：

none：特殊关键字，表示无关键帧。keyframes-name：由 @keyframes 定义的关键帧集合名

.box {animation-name: slidein;}.box1 {animation-name: slidein,scale-width;}@keyframes slidein {from {color: red; }to {color: blue;}}@keyframes scale-width {0% {width: 50px; }50% {width: 120px;}100% {width: 80px;} }

`animation-duration`

概念：属性指定一个动画周期的时长。该属性支持多重值每个值使用逗号’,'隔开。可以指定多个可接受的属性值：

time：一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。

.box {animation-name: slidein;animation-duration: 6s;}.box1 {animation-name: slidein,scale-width;animation-duration: 500ms, 3s;}

`timing-function`

概念：该属性与transition-timing-function相同，接受一个描述动画加速度曲线的函数，对于动画而言timing function作用于一个关键帧周期而非整个动画周期，而是每一个关键帧开始与结束。该属性可以指定多重值，每个值会被应用到由animation-name指定的对应动画上。可接受的值有：

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)）。steps(number, direction)：将过渡分割成段，而不是以平滑形式过渡，该方法接受两个参数：参数一：将整个状态变化拆分成几段过渡状态参数二：动画过渡顺序可选值为end（默认值）第一帧是动画开始的时候状态一步步到结束状态。start 第一帧是动画结束的时候状态一步步到开始状态

.box {animation-timing-function: ease;animation-timing-function: ease-in;animation-timing-function: ease-out;animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);}

`animation-delay`

概念：animation-delay CSS属性定义动画于何时开始，即动画应用在元素上到动画开始的这段延迟时间的长度。该属性支持多重值每个值之间使用逗号隔开，可接受的值为：

time：该值可用单位为秒(s)和毫秒(ms)。设置动画的延迟时间可以为负

animation-delay值为负时，会让动画从指定时间绝对值处立即开始，如：如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。

.box {animation-delay: 3s;animation-delay: 2s, 4ms;}

animation-direction

介绍：animation-direction CSS 属性指示动画是否反向播放，它通常在简写属性animation中设定。支持多重值，可选值为：

normal：每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。alternate：动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。reverse：反向运行动画，每周期结束动画由尾到头运行。alternate-reverse：反向交替，反向开始交替。动画第一次运行时是反向的，然后下一次是正向，后面依次循环。

.box {animation-direction: alternate;animation-direction: alternate-reverse;animation-direction: normal, reverse;animation-direction: alternate, reverse, normal;}

animation-fill-mode

介绍：CSS 属性animation-fill-mode设置CSS动画在执行之前和之后如何将样式应用于其目标。支持多重值，可选值为：

none 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。forwards目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于animation-direction的值backwards动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值。both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

animation-iteration-count

介绍：animation-iteration-count CSS 属性定义动画在结束前运行的次数可以是n次或无限循环。可能的属性值：

infinite：无限循环播放动画.number：动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。

.box {/* 值为关键字 */animation-iteration-count: infinite;/* 值为数字 */animation-iteration-count: 3;animation-iteration-count: 2.4;/* 指定多个值 */animation-iteration-count: 2, 0, infinite;}

animation-play-state

介绍：animation-play-state CSS 属性控制一个动画是否运行或者暂停。支持多重值，可设置的值为：

running 运行动画。paused 暂停动画。

注意：恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。一般会通过js控制该属性实现动画的播放暂停效果

.box {animation-play-state: running;animation-play-state: paused;animation-play-state: paused, running, running;}

animation

概念：CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

.box {/* @keyframes duration | timing-function | delay |iteration-count | direction | fill-mode | play-state | name */animation: 3s ease-in 1s 2 reverse both paused slidein;/* @keyframes duration | timing-function | delay | name */animation: 3s linear 1s slidein;/* @keyframes duration | name */animation: 3s slidein;}

CSS Transforms 二维

transform

介绍：CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

注意 transform 可以在transition、animation中使用
二维变化中可接受的值：

none 无需任何变化translateX() 元素渲染区域（坐标轴）沿x轴平移执行距离，可以是长度单位或自身宽度的百分比。可以为负

.box {transform: translateX(40px);/*向右平移自身宽度的一半*/ transform: translateX(50%); }

translateY() 元素渲染区域（坐标轴）沿y轴平移执行距离，可以是长度单位或自身宽度的百分比。可以为负

.box {transform: translateY(40px);/*向下平移自身高度的一半*/ transform: translateY(50%); }

translate(x,y) 该方法是translateX()、translateY()简写方法

.box {/*向右平移40px*/ transform: translate(40px);/*向右平移40px,向上平移自身高度的一半*/ transform: translate(40px,-50%); }

scaleX() 元素渲染区域（坐标轴）水平缩放指定倍数

.box {transform: scaleX(1.2);}

scaleY() 元素渲染区域（坐标轴）垂直缩放指定倍数

.box {transform: scaleY(1.2);}

scale() 该方法是scaleX()、scaleY()简写方法

.box {/*等价于 scaleX(1.2) scaleY(1.2)*/transform: scale(1.2); /*等价于 scaleX(1.2) scaleY(2)*/transform: scale(1.2, 2);}

rotate() 方法通过指定一个角度旋转元素渲染区域。可以为负逆时针旋转。

.box {/*顺时针旋转45度*/transform: rotate(45deg);/*顺时针旋转一圈*/transform: rotate(1turn);}

skewX() 函数是用于水平拉伸，它将元素渲染区域的每个点在水平方向上扭曲一定角度

.box {transform: skewX(45deg);}

skewY() 函数是用于垂直拉伸，它将元素渲染区域的每个点在水平方向上扭曲一定角度

.box {transform: skewY(45deg);}

skew(angelX, angelY) 该方法是skewX()、skewY()简写方法

.box {/*等价于 skewX(45deg)*/transform: skew(45deg);/*等价于 skewX(45deg) skewY(10deg)*/transform: skew(45deg, 10deg);}

注意：一个transform方法可以设置多个形变函数，但是调用顺序有一定要求，推荐先平移后再进行旋转和缩放。

.box {transform: translate(50px,100px) rotate(30deg) scaleX(0.5);}

transform-origin

介绍：该属性CSS属性可以更改一个元素变形的原点。

语法：transform-origin: offsetX[,offsetY [, offsetZ]]

offsetX：表示元素形变原点 x 轴坐标，其取值与background-origin相同

.box {transform-origin: center;transform-origin: top;transform-origin: bottom;transform-origin: 15px;transform-origin: 50%;}

offsetY：表示元素形变原点 Y 轴坐标，默认值center ，其取值与background-origin相同

.box {transform-origin: center center;transform-origin: top right;transform-origin: bottom left;transform-origin: center 15px;transform-origin: 0 50%;}

offsetZ：只有在元素进行三维变化时有效，表示元素形变原点 Z 轴坐标，第三个值必须是长度不能是百分比。

.box {transform-origin: center center 10px;transform-origin: top right 20rem;}

`css

.box {

transform: skewY(45deg);

}

- skew(angelX, angelY) 该方法是skewX()、skewY()简写方法```css.box {/*等价于 skewX(45deg)*/transform: skew(45deg);/*等价于 skewX(45deg) skewY(10deg)*/transform: skew(45deg, 10deg);}