前言

写这篇文章主要是让大家能了解 css3 的一些新特性，以及基础的用法，感觉css3的魅力！

如果想要用好css3，这个得靠大家继续努力学习，寻找一些讲得更深入的文章或者书籍了！如果大家有什么其他特性推荐的，欢迎补充！大家一起学习，进步！

css3 参考手册

CSS参考手册_web前端开发参考手册系列 (doyoe.com)

兼容性

CSS3 兼容性的历史？

prefix

browser

webkit

chrome 和 safari

firefox

opera

预处理器、后处理器

预处理器：

pre-processor e.g. sass/less next-css

后处理器：

提供一个 CSS 环境，会补齐兼容性。

post-processor e.g. Autoprefixer

注意：

预处理、后处理需借助PostCSS。

postCss？

是 js 实现的 css 的抽象的语法树 AST（Abstract Syntax Tree），实现了前半部分；剩下的部分交给插件来做，插件基于这个语法树实现自己的功能。比如：next-css、AutoPrefiexer 等。充分体现了扩展性。

CSS3 选择器

关系型选择器模式

E > F 子代选择器

E + F 下一个满足条件的兄弟元素节点

E ~ F 并级下满足条件的所有的兄弟元素节点

属性选择器

E[attr~=val] 属性值包含 val。

E[attr |=val] 属性值以 val-或val 开头。

E[attr^=val] 属性值以val 开头。

E[attr$=val] 属性值以val结尾。

E[attr*=val] 属性值中包含val。

伪元素选择器

::after 创建一个伪元素，作为已选中元素的最后一个子元素。

::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素

::first-letter 选中某块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）

::first-line 在某块级元素的第一行应用样式

::selection 应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分），只能改变：color、background-Color、text-shadow。

::slotted 用于选定那些被放在 HTML 模板中的元素

::placeholder 作用于一个表单元素的占位文本。

伪类选择器

选择器	功能描述
E:firse-child	作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child	作为父元素的最后一个子元素的元素E。与E：nth-last-child(1)等同
E:root	选择匹配元素E所在文档的跟元素。在HTML文档中，跟元素始终是html，此时该选择器与html类型选择器匹配的内容相同。
E F:nth-child(n)	选择父元素E的第N个子元素F。其中N可以是整数（1、2、3）、关键字（even、odd）、可以是公式（2n+1、-n+5）而且n值起始值为1
E F:nth-last-child(n)	选择元素E的倒数第N个子元素f。此选择器与E F:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中:nth-last-child(1)始终匹配的时最后一个元素，与:last-child等同
E:nth-of-type(n)	选择父元素内具有指定类型的第N个E元素
E:nth-last-of-typy(N)	选择父元素内具有指定类型的倒数第N个E元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素，与:nth-of-type(1)等同
E:last-of-type	选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型的子元素，且该子元素匹配E元素
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点。

not、target

E:not(s) 排除

E:target 被锚点所标记的元素。

其他

E:empty 选择E 没有元素节点。注意:除注释不算节点。

E:checked

E:enabled

E:disabled

E:read-only

E:read-write

border & background

border-radius

设置4个圆角

border-radius: 10px;

设置单个圆角

设置单个圆角，先写上下方向。一个值则代表两个方向。

border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;

简写

水平 / 垂直

border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;

原理：

水平、垂直为半径的圆，与边框相切的部分。

垂直、水平半径一致，圆；不一致，椭圆。

box-shadow

内阴影

box-shadow: inset xOffset yOffset blur sqread color;

xOffset 水平偏移量
yOffset 垂直偏移量
blur 模糊值，基于边框原来的位置向两边同时模糊
sqread 扩大，在水平、垂直同时增加
color 阴影颜色

外阴影

box-shadow: xOffset yOffset blur sqread color;

原理：

注意：

哪个阴影最先设置，在最上面。

阴影在背景上面，在文字在下面。

border-image

border-image-source 设置border背景图片，支持渐变色

border-image-slice 4根横线分割背景图位置（上右下左）。

|[border-image-slice , border-image-width , border- image-outset ]

border- image-outset：向外拉伸

border-image-width：默认值为1，设置border-image 里面图片的宽度。

border-image-slice: 10 10 10 10 fill; 上右下左，可填数字（不带px）、百分比；fill 填充内容区。

注意:

不填border-image-slice默认值100%。 border-image-repeat stretch、round、no-repeat、space

传两个参数时，分别代表水平、垂直。

border-image-slice原理：

background-image

可填多url()。

background-image: url(eye1.jpg), url(eye2.jpg);

CSS3 背景 | 菜鸟教程 (runoob.com)

background-origin

CSS3 background-origin 属性 | 菜鸟教程 (runoob.com)

注意：

background-position 相对于origin定位。

background-clip

以什么位置截断，以外的内容不显示。

border-box（默认值）、padding-box、content-box、text；

text 用文字内容区截取背景图片，文字以外的内容不显示。只在webkit下兼容。

background-repeat

background-repeat: repeat-x、repeat-y、round、space、no-repeat;

background-attachment

改变背景的定位属性。

background-attachment 的作用是设置背景图片是随滚动轴如何滚动的css属性，前提是定义了 background-image 属性。

属性：

scroll 默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
local 背景图相对于元素内容固定。
fixed 背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了 body 上。
inhert 就是单纯地继承父元素的属性。

渐变

CSS3 渐变 | 菜鸟教程 (runoob.com)

text

属性	描述
hanging-punctuation	规定标点字符是否位于线框之外。
punctuation-trim	规定是否对标点字符进行修剪。
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。
text-outline	规定文本的轮廓。
text-overflow	规定当文本溢出包含元素时发生的事情。
text-shadow	向文本添加阴影。
text-wrap	规定文本的换行规则。
word-break	规定非中日韩文本的换行规则。
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。

text-shadow

text-shadow: xOffset yOffset blur color;

文字阴影在背景上面，在文字下面。

案例： 浮雕效果

text-shadow: 1px 1px #000, -1px -1px #fff;

案例： 镂刻效果

text-shadow: -1px -1px #000, 1px 1px #fff;

案例：文字剪切背景图片的问题？

设置 -webkit-background-clip: text;文字就变成背景的一部分；

text-shadow文字阴影在背景上面，在文字下面。

font-face

外部字体包。

@font-face { 
    font-family: myFirstFont; 
    src: url(sansation_light.woff); 
} 
div{ 
    font-family: myFirstFont; 
}

多列

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	`columns: column-width column-count`

注意：

column-width、column-count 不一起使用。

box

盒模型

盒模型：

W3C Standards mode

boxWidth = width + padding(2) + border(2)

IE 6 Quirks mode

boxWidth = width

怪异盒模型场景：

场景一：宽度不固定，但是内边距固定
场景二：宽度用户自定、后端传入的，但是padding、border固定的

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

box-sizing: content-box | border-box | inherit
outline: outline-color outline-style outline-width outine-offset
overflow

visible（默认值）、hidden、scroll、auto

overflow-x,overflow-y 设置非visible的属性时，另一个方向属性会自动将默认值visible设置为 auto 。

resize

both 、horizontal、vertical 必须和overflow一起使用，才生效。

CSS3 弹性盒

当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

父项常见属性

flex-direction

设置主轴的方向，flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有行和列、x 轴和y 轴。

row（水平）、 column（垂直）、 row-reverse 、column-reverse

注意：

主轴和侧轴是会变化的，就看 flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

justify-content 设置主轴上的子元素排列方式

flex-start 、 flex-end 、 center：在主轴居中对齐、 space-between：先两边贴边，再平分剩余空间（重要）、 space-around：平分剩余空间

flex-wrap 设置子元素是否换行

wrap 、nowrap 、 wrap-reverse

align-content 设置侧轴上的子元素的排列方式（多行），在单行下是没有效果的

flex-start flex-end center space-between space-around stretch (前提：未设置子元素的高度；拉伸子元素)

align-items 设置侧轴上的子元素排列方式（单行），默认值：stretch

stretch：拉伸子元素；前提：未设置子元素的高度； flex-start flex-end center：居中显示 baseline：基于子元素内容的底线对齐

flex-flow 复合属性

相当于同时设置了 flex-direction 和 flex-wrap

子项常见属性

order 子项的排列顺序（前后顺序）。默认值0；越小值，越排在前面。

align-self 自己在侧轴的排列方式；优先级大于父级设置的align-items，小于父级设置的

align-content auto、stretch：拉伸子元素；前提：未设置子元素的高度； flex-start flex-end center：居中显示 baseline：基于子元素内容的底线对齐

flex 定义子项目分配剩余空间，用flex来表示占多少份数。默认值 0。

flex-grow 按照设置的比例，瓜分剩余的空间，形成新的宽度

flex-shrink 压缩内容区。默认值：1

flex-basis 覆盖width。默认值：auto，跟width对齐

flex-shrink 伸缩公式：

加权值： 元素1内容区的宽度 * shrink + 元素2内容区的宽度 * shrink + 元素3内容区的宽度 * shrink

缩放公式： 多出来的值 * shrink / 加权值

flex-basis与width：

在不进行伸缩达到前提下。

当你没设置width，只写basis或者basis大于width，basis代表元素的最小宽度。内容超过会撑开元素。

设置width，并且basis小于width的时候，basis代表最小值， basis < realWidht < width

注意：

无论什么情况，被不换行内容撑开的容器，不会被压缩计算。 s 设置basis，当内容区大于basis时，不参与shrink压缩。若需要压缩，设置文本换行：word-break: break-word;

transition & animation

transition

CSS transition 属性 (w3school.com.cn)

animation

animation (doyoe.com)

transform

rotate()

rotate()

参照物：被设置的元素。

注意：旋转后，坐标轴也跟着变化。注意旋转顺序。

transform-orign

变换中心，是给transform设置的。共用一个transform。

空间的变换中心：transform-origin: 100px 100px 100px;

百分比、方位名词、像素。

rotate3d()

矢量方向

transform: rotate3d(x, y, z, angle);

x,y,z 确定空间的矢量值。数值不重要，比值很重要。

设置的矢量方向，作为接下来旋转的轴。以该轴旋转angle 角度。

浏览器坐标系：

scale()

伸缩的是此元素的变化坐标轴的刻度。

可进行叠加操作。

伸缩轴随着旋转改变。

scale(x, y);
scalex();
scaley();
scalez();
scale3d();

skew()

倾斜坐标轴。刻度肯定被拉伸了。

x 倾斜y轴，y 值倾斜x轴。

skew(x, y);
skewx();
skewy();

translate()

参考自身。

translate(x, y);
translatex();
translatey();
translatez();
translate3d();

perspective()

transform: perspective(800px); 在元素自身上加一双眼睛。

注意：写在最前面。不能设置perspective-origin 。默认是center center。

matrix

transform的一系列属性值：rotate() scale() translate() skew()；底层都是通过 matrix 实现。

矩阵就是transfrom 选中的计算规则。

矩阵的乘法：

规则

矩阵满足相乘条件：第一个矩阵的列数等于第二个矩阵的行数；第二个矩阵有多少列，结果就有多少列。

第一个矩阵的行乘以第二个矩阵的列中的相同位置的行，生成结果。

平面变换的矩阵基础：

a,c,e,b,d,f 是选填的值；x, y 是变换位置的元素的原始坐标。

得到的结果也是矩阵，是元素最终的坐标位置。

perspective

设置景深

perspective: 800px; 眼镜离屏幕的距离。给父级设置，子集受影响。景深可叠加。

perspective-origin: 300px 300px; 控制角度

投影大小

我们看到的结果都是元素在屏幕上的投影。

问题1：没有translateZ时，无论perspective 距离屏幕多远，投影的大小不变。

问题2：translate 为负值时， perspective 值越小，投影越小。

保持3d状态

transform-style: preseve-3d; 在直接父级上添加。

注意

设置了perspective: 800px; transform-style: preserve-3d; 其中一个，这个元素就变成了定位的参照物元素。

【CSS3】CSS3 参考手册

前言

css3 参考手册

兼容性

预处理器、后处理器

CSS3 选择器

关系型选择器模式

属性选择器

伪元素选择器

伪类选择器

not、target

其他

border & background

border-radius

box-shadow

border-image

background-image

background-origin

background-clip

background-repeat

background-attachment

渐变

text

text-shadow

font-face

多列

box

盒模型

CSS3 弹性盒

父项常见属性

子项常见属性

transition & animation

transition

animation

transform

rotate()

rotate3d()

scale()

skew()

translate()

perspective()

matrix

perspective