阿锐丫

CSS3新特性概述

新增特性

选择器的拓展

页面布局的加强

多列布局方式

可变更的盒模型

可伸缩的布局方式

元素修饰的加强

RGBA和透明度

圆角支持

多背景图片支持

渐变效果支持

阴影和反射效果

开放字体的支持

多终端的适配

动画支持

详解

初识CSS3选择器

属性选择器

结构伪类选择器

UI元素状态伪类选择器

目标伪类选择器

否定伪类选择器

通用兄弟元素选择器

CSS3多列布局

语法及兼容性

示例

简化语法

参考列表

CSS3 Flexbox属性与弹性盒模型

简介

初识Flexbox

css3新增特性

本文将CSS3新增的特性按照功能分为下面的几个部分，

选择器的拓展
页面布局的加强
元素修饰的加强
开放字体的支持
多终端的适配
动画支持

选择器的拓展

CSS3新增了许多可使用的选择器使得前端开发人员在选择页面元素时更加灵活。新增的选择器包含如下几个方面，

属性选择器
结构伪类选择器
UI元素状态伪类选择器
目标伪类选择器
否定选择器
通用兄弟选择器

具体的不打算在本文展开叙述，可参考文章初识CSS3选择器。

页面布局的加强

多列布局方式

在以前，如果我们需要实现一个多列的页面布局，往往采用的方案是浮动或者绝对定位。CSS3中新增了多列布局使得页面布局更加灵活。

这里是多列布局的W3C官方文档。CSS3中新增了相关的属性column-count和column-width来设定具体的多列布局样式。示例代码如下，



    blablablabla....

效果如下图，

在实际的使用中，我们往往仅需要设置column-count或者column-width其中的一个属性就好，浏览器会自动根据可展示的空间对相应的元素进行分列或者设置每一列的宽度（从某种角度说，这也是一种自适应）。

除了column-count或者column-width属性之外，还有column-gap及column-rule属性可供设置，如下示例代码，



    blablablabla....

其效果如下，

关于CSS3多列布局更加详细的内容，请参阅博主的这篇文章CSS3多列布局。

可变更的盒模型

我们知道W3C的CSS2.1规范中，默认的盒模型在计算盒子的总大小的时候，元素的border和padding是被被加入到宽度和高度之中的。而IE系的老旧浏览器的行为恰恰与之相反。

CSS3规范提供了box-sizing属性并允许设置浏览器使用的盒模型。

简单来说box-sizing属性提供了content-box和border-box两种赋值来确定元素究竟使用哪一种盒模型。其中现代浏览器默认的取值是content-box，既符合W3C标准的盒模型。关于box-sizing更多的内容，请参与博主之前的一篇文章CSS盒模型科普#box-sizing属性。

可伸缩的布局方式

CSS3引入了可以算是一种新的盒模型：弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。

看下面的示例代码，

其展示如下，

关于弹性盒模型的更多内容，请参阅博主的这篇文章CSS3弹性盒模型。

元素修饰的加强

CSS3提供一系列属性来支持以前必须使用图片或者js操作才能实现的效果，大大的提升了页面展示效果的开发效率。

RGBA和透明度

CSS3提供rgba来支持为元素设置透明度。如下示例代码，

div {
    color: rgba(255, 0, 0, 0.75); 
    background: hsla(112, 72%, 33%, 0.68);
}

从示例代码可见，CSS3支持rgb和hsl两种颜色声明方式，最后一位参数即表示透明度，其取值范围为0~1，0为完全透明1为完全不透明。

注意，使用rgba和opacity都能够使得某元素变得透明，但是两者有一个非常核心的区别，opacity属性将某元素及其所有的子元素都应用透明样式，而rgba只在被设置的元素应用透明样式并不影响其子元素。

圆角支持

CSS3为圆角（border-radius）提供了更加一般的支持，

.border-radius {
    border-radius: 15px;
}

效果如下，

关于CSS3圆角的更多内容，请参阅博主的这篇文章CSS3圆角。

多背景图片支持

如果我们需要实现一系列背景图片堆叠在一起，一般的做法可能是需要使用多个div元素进行布局，通过调试每个div的背景样式来达到堆叠的目的。

CSS3允许你使用多个属性（background-*系列属性），在某一个页面元素上添加多层背景图片。（有点类似PS中图层的概念）

如下面的示例代码，

div {   
    background: url(bg1.jpg) top left no-repeat,
        url(bg2.jpg) bottom left no-repeat,   
        url(bg3.jpg) center center repeat-y;   
}

这样就可以在同一个div元素中应用多个背景图片。具体的实践请参阅这篇文章CSS3背景。

渐变效果支持

CSS3中提供了渐变（gradient）的支持，所谓的渐变就是两种或多种颜色之间的平滑过度。CSS3提供的渐变支持中又分为两种，线性渐变和径向渐变。

其效果如下下图，

关于CSS3渐变的更多内容，请参阅博主的这篇文章CSS3渐变。

阴影和反射效果

我们可以使用text-shadow和box-shadow来达到阴影的目的。

如下示例代码，

.class1{ 
   text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
} 
.class2{ 
   box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
}

其中text-shadow是针对文字进行阴影设置，而box-shadow是针对容器元素进行阴影设置。同时text-shadow和box-shadow都支持同时对一个元素设置多个阴影属性（即所谓的多重阴影）。例如，

.class1{ 
    text-shadow:1px 1px 2px #c10ccc,
        1px 1px 2px #648cb4,
        1px 1px 6px #cc150c;
 }

效果如下，

再来谈谈反射效果，所谓的反射其实看起来就跟水中的倒影一样，如下图的效果，

其实它的设置很简单，

.classReflect{ 
    -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.51))); 
}

关于CSS3中阴影和反射更多的内容，请参阅博主的另一篇文章CSS3阴影和反射。

开放字体的支持

CSS3提供@font-face特性为页面自定义字体的展示提供支持。通过@font-face你可以在页面中嵌入不同的自定义字体，为不同的元素应用不同的字体。

其一般用法如下，

/* 自定义字体 */
@font-face { 
    font-family: BorderWeb; 
    src:url(BORDERW0.eot); 
}
@font-face { 
    font-family: Runic; 
    src:url(RUNICMT0.eot); 
}
/* 为不同的元素应用不同的字体 */
.border {
    font-family: "BorderWeb";
    font-size: 35px; color: black;
} 
.event {
    font-family: "Runic";
    font-size: 110px;
    color: black;
}

关于@font-face更多的内容请参阅博主之前的另一篇文章WebFont与页面ICON图标研究。

多终端的适配

之前为了适配不同的设备（主要是不同设备的屏幕不一样），可能需要为不同设备准备不同的css文件。CSS3提供了更加方便的方式，通过媒体查询（media queries）可以让你为不同的设备基于它们的能力定义不同的样式。

比如，在可视区域小于480像素的时候，你可能想让网站的侧栏显示在主内容的下边，这样它就不应该浮动并显示在右侧了，

#sidebar {   
    float: right;   
    display: inline; /* IE Double-Margin Bugfix */  
}   
@media all and (max-width:480px) {   
    #sidebar {   
        float: none;   
        clear: both;   
    }   
}

关于CSS3媒体查询的更多内容，请参阅博主的这篇文章CSS3媒体查询。

动画支持

web开发中要在页面上实现动画有许多种途径。CSS3为我们提供了一系列方便的方法。在CSS3中，有如下三个关键字可以用来实现动画，

transition，意为过渡
transform，意为变换
animation，意为动画

这三者之间稍有区别，关于他们更加详细的用法，请参阅博主的这篇文章CSS动画与@keyframes研究。

详解

初识CSS3选择器

2018-06-07 17:00 更新

大纲

1. 属性选择器
2. 结构伪类选择器
3. UI元素状态伪类选择器
4. 目标伪类选择器
5. 否定伪类选择器
6. 通用兄弟元素选择器

注意：由于CSS3中的部分内容尚未完全定稿，所以本文的部分可能会随时更新。

现在谈起CSS3的相关内容，其实CSS3已经不算是一个新东西了，毕竟出来有一段时间了。不过我却没有什么系统的经验，上次被人问到是否了解CSS3新增的选择器，各种尴尬，因为我压根就不知道哪些是CSS3新增的选择器，即使可能我之前有使用过。

为了补上这块知识的缺陷，恶补了一下CSS选择器的相关内容，并实验了每种选择器的效果。本文参考资源主要来自W3C文档

首先我们来看一张图，

图中展示目前CSS Level1~Level3支持的所有的选择器。这张图是从W3C上抄下来的，绝对权威。

本篇文章将会说一说CSS Level3新增的选择器（如上图中飘黄的加重部分）。并附带一些浏览器兼容性说明。

属性选择器

新增的属性选择器如下图所示，

这几个其实比较容易理解，使用起来应该没有什么障碍，这里就不多解释了。

其浏览器兼容性如下图，

结论：除了IE6，基本上可以放心的使用了。

结构伪类选择器

新增的结构伪类选择器如下图所示，

说实话，新增的这几个结构伪类选择器很容易弄混淆，特别是*-child(n)跟*-of-type(n)。

这里，我们就以nth-child(n)与nth-of-type(n)为例，通过一个demo来说明一下他们之间的区别。

通过demo，我们可以看出，

nth-child(n)表示，选择满足以下条件的元素：第一是一个p元素；第二是父元素的第n个子元素
nth-of-type(n)表示，选择父元素的第n个子元素p

如果还没弄明白，这里有一篇文章可供参考。

其浏览器兼容性如下图，

UI元素状态伪类选择器

新增的UI元素状态伪类选择器如下图所示，

其浏览器兼容性如下图，

目标伪类选择器

新增的目标伪类选择器如下图所示，

这个新增的选择器有点不太好理解，它是啥意思呢？例如页面上有个id=test的div，然后在URI中有#test的话，就会给id为test的div加上定义的样式。

其浏览器兼容性如下，

否定伪类选择器

新增的否定伪类选择器如下图所示，

个人觉得这个选择器可能会使用的比较频繁，它的作用是在匹配的一些列元素剔除选择符为s的元素。相当于做了个筛选。

其浏览器兼容性如下，

通用兄弟元素选择器

新增的通用兄弟元素选择器如下图所示，

这个选择器也应该蛮有用的，稍微注意一下与E + F这种通用兄弟选择器的区别就好了。

其浏览器兼容性如下，

CSS3多列布局

2018-06-07 17:00 更新

大纲

1. 语法及兼容性
2. 示例
3. 简化语法
4. 参考列表

注意：由于CSS3中的部分内容尚未完全定稿，所以本文的部分可能会随时更新。

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。本文将会详细阐述column属性的相关用法。

语法及兼容性

属性名	含义	可取值	说明
`column-count`	列数目	-	-
`column-width`	每列宽度	-	不一定会使用，浏览器将会根据`column-count`及`column-width`作自适应计算
`column-rule`	列分割线的样式	-	不占用真实空间，设置的方式跟`border`一致，可拆分为`column-rule-width`、`column-rule-style`、`column-rule-color`
`column-gap`	各列之间的间隙宽度	-	`column-gap`将占用真实的空间大小
`column-span`	允许一个元素的宽度跨越多列	`none` 、`all`	-

除了上述的几个常用的属性之外，还有

column-fill属性，此属性用于标识分列的高度是否统一。不过博主在Chrome41上实验时貌似还不支持。
break-before、break-after、break-inside属性，这三个属性是用于标识分列之间的行为的。这三个属性目前来说并不常用。

其兼容性如下图，

不出所料，IE9及其以下的浏览器是不支持的。而且column目前并不完全支持W3C的标准语法，需要针对不同的浏览器内核添加不同的前缀。（下面的示例中将默认使用-webkit-前缀）

示例

让我们先来看个简单的示例，



    blablabla.....

打开这个demo，看一下效果。其效果如下图，

此时，我们如果注释掉css代码中的column-count或者column-width属性，得到的结果是不一样的。各位看客可在给出的demo链接中自行实验。

结论：其实column-width并不是必须的，浏览器会自动根据column-count和column-width计算出自适应的布局。上面的代码中我们设置column-width为100px，column-count为3列，得到的结果虽然是分成了3列，但是每一列的宽度并不是100px。

我们再来看看column-span属性。此属性目前只能有两个可取值：none或者all，标识某一元素要么不进行跨列要么就跨了所有的列。具体的效果可以参见这个demo，其效果如下，

各位看官可自行将column-span属性变更成none或者all观察其效果变化。

简化语法

column-count及column-width属性可以合并起来使用，如下



    blablabla......

其中columns: 3 15em与下面的写法是等效的，

div {
    -webkit-column-count: 3;
    -webkit-column-width: 15em;
}

参考列表

CSS Multi-column Layout Module Level 1

CSS3 Flexbox属性与弹性盒模型

2018-06-07 17:03 更新

大纲

1. 简介
2. 初识Flexbox
1. 2.1. 相关概念
2. 2.2. 新旧语法
3. 属性详解
1. 3.1. 问题引导
2. 3.2. display: flex
3. 3.3. flex-direction
4. 3.4. flex-wrap
5. 3.5. flex-flow
6. 3.6. order
7. 3.7. flex条目的弹性设置
  1. 3.7.1. flex-basis
  2. 3.7.2. flex-grow
  3. 3.7.3. flex-shrink
  4. 3.7.4. 多行弹性布局的注意事项
8. 3.8. flex复合属性
9. 3.9. flex条目的对齐
  1. 3.9.1. 基于margin: auto对齐
  2. 3.9.2. 基于主轴对齐
  3. 3.9.3. 基于交叉轴对齐
10. 3.10. flex行的对齐
4. 浏览器兼容性
5. 参考列表

简介

CSS3新增的Flexible Box Layout（弹性盒模型布局方式）是CSS3规范中提出的一种新的布局方案。该布局方案提供了一种更加高效简单的方式来处理容器中的元素布局、对齐、空间分配等操作，即使容器中的元素尺寸未知（或者尺寸大小是动态的）也能工作得很好。目前CSS3提出的此种布局方式也被各大主流浏览器所支持，可以预见Flexbox Layout在未来将会被广泛使用。

本文将详细的介绍该布局模型，同时会辅以一定的示例来具体说明如何在具体的web开发中应用该布局模型，达到传统布局方案（块级布局、内联布局、绝对定位局部等）的效果。

初识Flexbox

先让我们来说一说Flexbox Layout（弹性盒模型布局）的基本原理。

在弹性盒模型布局中，需要事先指定一个容器，后续的所有布局操作都是基于此容器来定义的。其核心是容器会根据布局的需要（动态的）调整其中所包含的子元素（即布局条目）的尺寸、顺序来填充容器的所有可用空间。

当容器的尺寸由于屏幕大小（或者浏览器窗口尺寸）发生变化时，其中包含的布局条目也会自动地进行调整。举个例子，当容器尺寸增大时，包含的条目将会自动拉伸以沾满多余的空白空间；当容器尺寸变小时，条目会自动收缩以适应容器的尺寸防止移除容器的范围。

额外提一点，Flexbox布局是不存在内置的布局方向的。这是什么意思呢？比如传统的布局方案中，块级布局（block）默认是将各个块级元素按照垂直方向自上向下依次堆放；内联布局（inline）默认是将各个内联元素按照水平方向按照从左到右的顺序依次堆放。而弹性盒布局不存在这种默认的布局方向限制，它提供了独立的布局方向属性，开发人员可以根据布局需要自行设置。

新旧语法

在进行flex布局相关属性的详细说明之前，有必要提一点。就是flex布局先后有两种语法，一种是W3C于2009年发布的旧语法，另一种是W3C最新发布的新语法。

这里我不对前后两种语法的差异作解析，仅从语法层面说明存在这个差异。

旧语法中，所有的flex属性都以box打头，flex设置为display: box。如下图，

新语法中，所有的flex属性都以flex打头，flex设置为display: flex。如下图，

关于这两种更多的差异请参阅官方文档或者CSS参考手册。

其中新旧语法中间还有存在一种非官方的过渡语法规范，flex设置为display: flexbox

顺便提一句，关于新旧语法在实际使用时，肯定是推荐使用新语法的，虽然新语法的浏览器支持性不如旧语法，但是毕竟是旧的语法，迟早是要淘汰的，而且新语法的表现也更加一致。

属性详解

注意，flex布局中的css样式声明与一般的css声明不同，它会有两个作用对象，分别是flex容器和flex条目。即，有的flex属性只能作用于flex容器，而有的flex属性只能作用于flex条目。

下面我们针对flex布局的各个属性分别作详细说明。

问题引导

在详细阐述各个属性之前，我们先来抛出一个比较常见的布局问题。问题是这样的，现在有一个无序列表（ul元素），其包含了6个列表项（li元素），如何做可以让列表项（li元素）自适应父容器的尺寸？换句话说，当父容器尺寸足够大时，所有的li元素平铺成一行；当父容器的尺寸减小时，li元素自动换行。

大家都能想到的一种常规做法应该就是给li元素设置浮动。不过这里我们将使用flex布局来实现这种布局需求。html和css代码如下，

.flex-container {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.flex-item {
    margin: 5px;
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    background-color: gold;
}

具体的效果可以看这个demo。各位看官可以自行缩放浏览器的窗口，观察.flex-item块的排列行为。注意，这里我并没有使用浮动的相关属性。

`display: flex`

在之前说过，要想使用弹性盒布局必须事先指定一个容器，这个容器就是所谓的flex容器。那么如何指定flex容器呢？很简单，将其display属性设置为flex即可。如下，

.flex-container {
    display: flex;
}

注意，如果需要在内联的场景下使用flex布局，则需要设置display: inline-flex。而且以下几种属性设置在弹性盒布局中是不起作用的，

浮动元素（float）
清除浮动（clear）
css3多列布局（columns-*）
垂直居中（vertical-align）
首行/首字符选择伪类（::first-line和::first-letter）

`flex-direction`

flex-direction属性的作用是设置主轴方向。我们之前有说过，一旦主轴方向确定，那么连带的交叉轴的方向也会确定下来。这样就确定了flex条目基本的排列方式。

下面我们来看一下flex-direction的具体用法，如下表，

可选值	含义	备注
`row`	横向从左到右排列	即左对齐。此为默认值
`row-reverse`	反转横向排列（从右到左拍立）	即右对齐
`column`	纵向排列（从上到下排列）	即设置主轴方向为垂直方向
`column`	反转纵向排列（从下到上排列）	主轴方向为垂直方向，但是越是后面的flex条目反而在上方

在这个demo中，可以肆意改变flex-direction的值，并改变浏览器窗口大小，观察页面布局的变化。

`flex-wrap`

flex-wrap属性用于设置当所有的flex条目的尺寸之和超过flex容器的主轴尺寸时应该采取的行为。这是什么意思呢？

在默认情况下，flex容器中的flex条目会尽量的在一行上占满flex容器的空间。当主轴尺寸大于所有flex条目尺寸之和时，这时并没有什么问题。但是，当主轴尺寸小于所有flex条目尺寸之和时，此时就会出现flex条目之间相互重叠或者换行的情况。所以flex-wrap属性就是专门用来处理这种情况的。

下面让我们来看一下flex-wrap的具体用法，如下表，

可选值	含义	备注
`nowrap`	容器中的条目只占满容器在主轴方向上的一行，此时可能出现条目互相重叠或超出容器范围的现象	此为默认值
`wrap`	当容器中的条目超出主轴方向上的一行时，会把条目排列到下一行。而下一行的位置与交叉轴的方向一致	交叉轴的存在感就是在此
`wrap-reverse`	与`wrap`的含义类似，不同的是下一行的位置与交叉轴的方向相反。	-

与之前类似，我们可以在这个demo中实验不同flex-wrap取值的差异。

`flex-flow`

之前说的两个属性flex-direction和flex-wrap，从某种意义上来说就是设置flex布局的主轴和交叉轴。一旦flex布局的主轴和交叉轴确定下来，基本上整个布局中flex条目的排列方式我们就可以自行脑补出来了。

而flex-flow属性其实就是flex-direction和flex-wrap的复合属性。所以下面两段代码的效果是一致的。

.flex-container1 {
    flex-direction: row;
    flex-wrap: wrap;
}
.flex-container2 {
    flex-flow: row wrap;
}

`order`

前面说的几个属性其实都是针对flex容器的设置。而order属性是针对flex条目的。它的作用是自定义flex容器中条目的顺序。其用法示例如下，

.flex-item:last-child {
    order: -1;
}

这段css代码中使用了css3新出的一个结构伪类选择器:last-child，其作用是匹配.flex-item元素且该元素是其父元素的最后一个子元素。关于css3选择器的更多内容欢迎阅读博主的这篇文章初识CSS3选择器。

言归正传，上面的css代码，将导致最后一个li元素反而在第一个展示。效果如下，

注意，此时虽然最后一个子元素被置顶展示，但是并没有改变其html文档结构。

order的用法如下，

order:

用整数值来定义排列顺序，数值小的排在前面。默认值为0，且可以设置为负值。

flex条目的弹性设置

弹性盒模型的真正牛逼的地方在于flex容器中的flex条目的尺寸是弹性的。这是啥意思呢？个人觉得它包含下面的几层含义，

主轴尺寸不够大时，使用flex-wrap可以让flex条目自动换行。
主轴尺寸不够大时，还可以缩小条目的尺寸防止溢出容器范围。
主轴尺寸足够大时，可以适当扩展条目的尺寸来占用容器的额外空白空间。

这里我们把重心放在后两点上，即flex容器可以根据本身尺寸的大小来动态地调整flex条目的尺寸。

flex条目尺寸的弹性由3个css属性来确定，分别是flex-basis、flex-grow和flex-shrink。他们的相关说明如下，

属性	可选值	默认值	作用对象	含义	备注
`flex-basis`	, , `auto`	`auto`	flex条目	设置弹性条目的初始主轴尺寸	这里的初始值表示flex容器调整之前flex条目尺寸的初始值。此属性跟`width`等属性的设置模式是一致的
`flex-grow`		`1`	flex条目	当容器有多余的空间时，这些空间在不同条目之间的分配比例	用于设置flex条目的扩展因子，不能取负值
`flex-shrink`		`1`	flex条目	当容器的空间不足时，各个条目尺寸缩小的比例	此属性的作用与`flex-grow`相反

关于上述三个属性的一些额外说明，

`flex-basis`

flex-basis用于设置flex条目的初始尺寸（未进行任何调整之前）。当设置为auto时，则实际使用的值是主轴尺寸属性的值。若主轴尺寸也是auto，那么使用的值由条目内容的尺寸来确定。

`flex-grow`

当主轴尺寸足够大时，flex条目在容器内一行就全部排列完了，此时容器的空间还有剩余，那么可用flex-grow扩展flex条目。举个例子，一个容器中有3个flex条目，其flex-grow属性分别如下，

.flex-item:nth-child(1) {
    flex-grow: 1;
}
.flex-item:nth-child(2) {
    flex-grow: 2;
}
.flex-item:nth-child(3) {
    flex-grow: 3;
}

同时，flex容器的宽度是800px，每个条目的宽度为200px，所以容器还将剩余200px。由于条目都设置了flex-grow属性，那么此三个条目将按比例分配容器的剩余空间。第一个条目将得到200 1/6 = 33px左右，第二个条目将得到200 2/6 = 66px，第三个条目将得到200 * 3/6 = 99px左右。效果如下图，

详情可参考这个demo。

`flex-shrink`

flex-shrink在使用上类似flex-grow，不过它使用于设置当主轴尺寸不够大时缩小flex条目。同样的，我们来举个例子，一个容器中有3个flex条目，每个felx条目的尺寸为200px，容器的尺寸为500px。很明显此时容器尺寸已经放不下其中三个flex条目了。我们对每个flex条目设置flex-shrink属性，

.flex-item:nth-child(1) {
    flex-shrink: 1;
}
.flex-item:nth-child(2) {
    flex-shrink: 2;
}
.flex-item:nth-child(3) {
    flex-shrink: 3;
}

如果我们希望flex容器能够刚刚好将三个flex条目放下，我们需要缩小的尺寸为600-500 = 100px。接下来三个条目将根据flex-shrink属性按比例的分摊需要缩小的尺寸，即分别为100 1/6 = 16.6px，100 2/6 = 33.3px，100 * 3/6 = 50px。所以三个flex条目最终的尺寸为200 - 16.6 = 183.4px，200 - 33.3 = 166.7px，200 - 50 = 150px。效果如下，

详情可参考这个demo。

多行弹性布局的注意事项

⚠️注意，这里额外提一个非常重要的点，就是在我们使用flex-grow和flex-shrink属性对flex条目进行扩展或者缩小时，这些操作其实是以行为单位来操作的，容器先根据flex-wrap的属性值来确定是单行布局或多行布局，然后把条目分配到对应的行中，最后在每一行内进行空白空间的分配。

这什么意思呢？我们来举个简单例子说明一下。假如我有一份代码如下，

这里容器中有4个flex条目，每个条目的宽度为300px，但是容器的尺寸只有999px，明显是不足以放下所有的flex条目的。此时前三个条目将堆放在第一行，第4个条目将单独的被堆放在第二行。此时第一行将会多出99px的空余空间，这99px的空余空间将会平均应用到第一行的三个条目上；第二行因为只有一个条目，此时这个条目将会直接占用剩余的699px。整个效果如下图，

详情可参考这个demo。

`flex`复合属性

如你所见，flex是一个复合属性，它的语法如下，

flex: none | auto | [flex-grow] | [flex-shrink] | [flex-basis]

其中none的含义为：0 0 auto, 即flex-grow: 0，flex-shrink: 0， flex-basis: auto。
其中auto的含义为：1 1 auto, 即flex-grow: 1，flex-shrink: 1， flex-basis: auto。

当flex-basis被省略时，其值为0%。

flex条目的对齐

当flex容器中flex条目的尺寸和排列都确定下来之后，我们还可以设置这些flex条目在容器中的对齐方式。

目前有三种对齐方式。

基于`margin: auto`对齐

第一种对齐方式是使用空白边，即margin: auto。在使用自动空白边时，flex容器中额外的空白空间将会由被声明为auto的空白边占据。

这种方式在W3C的官方文档被称之为non-normative，更加像是一种奇淫巧计。

我们来看个具体的例子，


    
        About
        
Projects
        
Interact
        
Login

ul {
    list-style: none;
    display: flex;
}
li {
    min-width: min-content;
}
#login {
   margin-left: auto;
}

其效果如下，

示例中的#login元素通过简单的margin-left设置，将其置于最右侧展示。详情可参考这个demo。

基于主轴对齐

第二种对齐方式是基于主轴方向上的对齐策略。可以通过justify-content属性来进行设置。借助此属性，我们可以调整flex条目在主轴方向上的对齐策略。

这种对齐方式的调整发生在修改条目的弹性尺寸和处理自动空白边之后。当容器中的一行中的条目没有弹性尺寸或是已经达到了它们的最大尺寸时，如果此时在这一行上还有额外的空白空间，我们可以使用justify-content来分配这些空白空间。该属性还可以控制当条目超出行的范围时的对齐方式。

我们来看下justify-content属性的基本用法，（注意，justify-content用于设置flex容器）

可选值	含义
`flex-start`	条目集中于该行的起始位置。第一个条目与其所在行在主轴起始方向上的边界保持对齐，其余的条目按照顺序依次排列。
`flex-end`	条目集中于该行的结束方向。最后一个条目与其所在行在主轴结束方向上的边界保持对齐，其余的条目按照顺序依次排列。
`center`	条目集中于该行的中央。条目都往该行的中央排列，在主轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则条目会在两个方向上超出同样的空间。
`space-between`	第一个条目与其所在行在主轴起始方向上的边界保持对齐，最后一个条目与其所在行在主轴结束方向上的边界保持对齐。空白空间在条目之间平均分配，使得相邻条目之间的空白尺寸相同。
`space-around`	类似于`space-between`，不同的是第一个条目和最后一个条目与该行的边界之间同样存在空白空间，该空白空间的尺寸是条目之间的空白空间的尺寸的一半。

各属性值的效果如下图，

基于交叉轴对齐

第三种对齐方式是基于交叉轴方向上的对齐策略。此种方式中，我们有两个属性可以做相关设置，它们分别是align-items和align-self。其中前者是用来设置flex容器的，后者是用来设置flex条目的，这两个属性的作用对象是不同的。在某些场景下，我们可以对flex条目设置align-self来复写flex容器指定的对齐方式。

我们来看看align-items的基本用法，

可选值	含义
`flex-start`	条目与其所在行在交叉轴起始方向上的边界保持对齐。
`flex-end`	条目与其所在行在交叉轴结束方向上的边界保持对齐。
`center`	条目的空白边盒子（margin box）在交叉轴上居中。如果交叉轴尺寸小于条目的尺寸，则条目会在两个方向上超出相同大小的空间。
`baseline`	条目在基准线上保持对齐。在所有条目中，基准线与交叉轴起始方向上的边界距离最大的条目，它与所在行在交叉轴方向上的边界保持对齐。
`stretch`	如果条目的交叉轴尺寸的计算值是`auto`，则其实际使用的值会使得条目在交叉轴方向上尽可能地占满。

各属性值的效果如下图，

align-self的属性基本与align-items一致（用法和含义基本都一样）。不过align-self除了align-items属性可选值之外，还可以设置为auto。当设置为auto时，其值是父节点的属性align-items的值,如果该节点没有父节点，则为stretch。

flex行的对齐

前面说完了flex容器中flex条目的对齐方式。这里我们再来说一下flex行的对齐。什么叫flex行？W3C官方文档中提到了一个名词，叫做Flex Lines。

那么什么叫Flex Lines呢？说的直白点就是多行flex布局时，主轴方向上的每一行就是Flex Lines。

举个例子，

#flex {
    display: flex;
    flex-flow: row wrap;
    width: 300px;
}
.item {
    width: 80px;
}

很明显，上述代码生成的flex容器一行肯定堆放不下所有flex条目的。又因为设置了flex-wrap: wrap，所以其在主轴方向上会发生换行。如下图，

如图所示，此flex布局将分为两行，每一行就是所谓的Flex Lines。

如果一个flex布局容器中不止一行，我们同样可以对行与行之间的对齐方式进行设置。为这一设置提供支持的属性就是align-content。其实此属性的作用和justify-content属性很相似，只不过justify-content是用于在主轴方向上对齐行内的flex条目，而align-content是用于设置行与行之间的对齐策略。

align-content详细的用法如下表，

可选值	含义
`flex-start`	行集中于容器的交叉轴起始位置。第一行与容器在交叉轴起始方向上的边界保持对齐，其余行按照顺序依次排列。
`flex-end`	行集中于容器的交叉轴结束位置。第一行与容器在交叉轴结束方向上的边界保持对齐，其余行按照顺序依次排列。
`center`	行集中于容器的中央。行都往容器的中央排列，在交叉轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则行会在两个方向上超出同样的空间。
`space-between`	行在容器中均匀分布。第一行与容器在交叉轴起始方向上的边界保持对齐，最后一行与容器在交叉轴结束方向上的边界保持对齐。空白空间在行之间平均分配，使得相邻行之间的空白尺寸相同。
`space-around`	类似于`space-between`，不同的是第一行条目和最后一个行目与容器行的边界之间同样存在空白空间，而该空白空间的尺寸是行目之间的空白空间的尺寸的一半。
`stretch`	伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。

各属性值的效果如下，

浏览器兼容性

本文的新旧语法中曾经提到，弹性盒模型官方有好几个版本的语法，这是因为其规范本身有过多个不同版本，因为浏览器对于该规范的支持也存在一些不一致。大致来说总共有三个不同版本的语法，

最新规范：最新版本规范的语法，即display: flex。
中间版本：2011年的非官方规范语法，即display: flexbox。
老规范：2009年的规范的语法，即display: box。

浏览器的支持情况如下，

Chrome	Safari	Firefox	Opera	IE	Android	iOS
21+（新规范）	6.1+（新规范）	22+（新规范）	12.1+（新规范）	11+（新规范）	4.4+（新规范）	7.1+（新规范）
20-（老规范）	3.1+（老规范）	2-21（老规范）	-	10（中间版本）	2.1+（老规范）	3.2+（老规范）

从上面看来，弹性盒布局模型基本已经被主流的现代浏览器所支持。除了IE系的浏览器拖了后腿之外，基本可以无障碍的使用。不过虽然如此，我们为了兼容性，在实际使用的时候除了规范中定义的属性之外，最好添加不同浏览器内核的私有前缀。

参考列表

w3c
css3-flexbox
深入理解 CSS3 弹性盒布局模型
CSS3 Flexbox
详解css3弹性盒模型（Flexbox）
A Complete Guide to Flexbox

CSS3背景

2018-06-07 17:04 更新

大纲

1. 已有属性
1. 1.1. background-color
2. 1.2. background-position
3. 1.3. background-repeat
4. 1.4. background-attachment
5. 1.5. background-image
2. 新增属性
1. 2.1. background-size
2. 2.2. background-clip
3. 2.3. background-origin
4. 2.4. CSS3 Multiple Background
3. 参考列表

注意：由于CSS3中的部分内容尚未完全定稿，所以本文的部分可能会随时更新。

Background是CSS Level1就开始支持的属性，用于设置元素背景相关内容。Background是一个复合属性，它包含如下几个子属性，

background-color，规定要使用的背景颜色
background-position，规定背景图像的位置
background-size，规定背景图片的尺寸
background-repeat，规定如何重复背景图像
background-clip，规定背景的绘制区域
background-origin，规定背景图片的定位区域
background-attachment，规定背景图像是否固定或者随着页面的其余部分滚动
background-image，规定要使用的背景图像

其中background-size，background-clip，background-origin，这几个属性是CSS3 Level3中关于background新增的属性。本篇文章将会简单阐述CSS Level1～CSS Level2中的属性，稍微详细点描述CSS Level3新增的几个属性。

已有属性

`background-color`

其语法如下，

background-color:  | transparent

background-color用于设置元素的背景颜色，其值可以是一个颜色值（可以为多种颜色的表达，比如RGB、十六进制、特定值’red’等）或者为transparent。默认值为transparent，意为透明，即啥颜色也不设置。

`background-position`

其语法如下，

background-position:  ||  || [left|center|right][,top|center|bottom]

background-position用于设置背景图片的位置参数。它有多种赋值模式，可以形如(0,0)、(0%,0%)，或者是使用’left’，’top’，’center’，’right’，’bottom’等字段进行设置。

在设置background-position属性时，脑子里需要有这样一个概念。以左上角(0,0)的位置为坐标系的原点，向右延伸为X轴，向下延伸为Y轴。所以形如(0,0)、(0%,0%)的赋值其实是表明了背景图像距离坐标系原点的距离。而’left’意为(0%, Y)，’right’意为(100%, Y)，’center’意为(50%, Y)，’top’和’bottom’的含义与其相似。

`background-repeat`

其语法如下，

background-repeat: repeat || repeat-x || repeat-y || no-repeat

background-repeat用于设置background-image（背景图片）在元素中的铺放风格的，其默认值为repeat，意为图片沿着右方（X轴方向）和下方（Y轴）同时平铺。

所以，repeat-x意为只沿着X轴方向平铺，repeat-y意为只沿着Y轴方向平铺，no-repeat意为不作任何平铺。

`background-attachment`

其语法如下，

background-attachment: scroll || fixed

background-attachment用于设置背景图像是否固定活着随着页面的滚动而滚动。其默认值scroll，表示背景图片会随着页面滚动而滚动；取值为fixed时，背景图片固定不动。

`background-image`

其语法如下，

background-image: none ||

background-image用于设置元素的背景图片，其默认值为none，为背景图片的地址，可用绝对地址亦可用相对地址。

新增属性

`background-size`

其语法如下，

background-size: auto ||  ||  || cover || contain

background-size属性用于设置背景的大小。其中，auto就是使用图片的原生宽高，和就是设置一个具体的值。这三个属性没什么还说的。下面说下cover和contain这两个赋值的含义。

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

需要注意的是，这两种取值都会导致图片失真。这里有一个示例可以体验两者的不同。

额外补充一点，当使用或者进行赋值时，我们可以只赋一个值，比如background-size: 100px，此时相当于background-size: 100px 100px。

兼容性：IE9+、Firefox 4+、Opera、Chrome以及Safari 5+支持background-size属性，所以在实际使用background-size属性时针对不同浏览器需要带上其前缀。

`background-clip`

其语法如下，

background-clip ： border-box || padding-box || content-box

background-clip属性用于设置背景的裁剪区域，即控制元素的背景实际显示区域的大小。

border-box，此为默认值，元素背景区域包含border区域及其之内的padding和content区域。
padding-box，元素背景区域包含padding及其之内的content区域。
content-box，元素背景区域仅包含content区域。

各个取值的不同效果展示，可参阅这个示例。

这里所说的border、padding、content等区域其实是CSS盒模型的组成部分，更多内容可参阅CSS盒模型科普。

兼容性：IE9+、Firefox、Opera、Chrome以及Safari支持background-clip属性，所以在实际使用background-clip属性时针对不同浏览器需要带上其前缀。

`background-origin`

其语法如下，

background-origin: padding-box || border-box || content-box

background-origin属性用于设置背景的background-position属性相对什么来定位。

padding-box，此为默认值，相对于内边距（padding的外边沿）来定位。
border-box，相对于边框（border的外边沿）来定位。
content-box，相对于内容（content的外边沿）来定位。

各个取值的不同效果展示，可参阅示例。

兼容性：IE9+、Firefox 4+、Opera、Chrome以及Safari 5+支持background-origin属性，所以在实际使用background-origin属性时针对不同浏览器需要带上其前缀。

CSS3 Multiple Background

CSS3的background属性允许设置多个除了background-color之外的属性。比如，

background-image: url1,url2,...,urlN;
background-repeat: repeat1,repeat2,...,repeatN;
background-position: position1,position2,...,positionN;
background-size: size1,size2,...,sizeN;
backrgound-attachment: attachment1,attachment2,...,attachmentN;
background-clip: clip1,clip2,...,clipN;
background-origin: origin1,origin2,...,originN;

所以利于这一点我们可以仅在一个元素上同时设置多个背景来达到以往需要多个元素配合才能达到的效果。

参考列表

CSS Backgrounds and Borders Module Level 3
CSS3 Background-size
CSS3 Background-clip
CSS Background-origin
CSS3 Multiple Backgrounds

CSS3渐变

2018-06-07 17:07 更新

大纲

1. 缘起
2. 兼容性
3. 线性渐变
1. 3.1. 定义与语法
  1. 3.1.1. 渐变方向
  2. 3.1.2. 渐变起点
  3. 3.1.3. 渐变终点
2. 3.2. 用法
  1. 3.2.1. 基本用法
  2. 3.2.2. 更多用法
    1. 3.2.2.1. 示例1
    2. 3.2.2.2. 示例2
    3. 3.2.2.3. 示例3
4. 重复线性渐变
5. 径向渐变
1. 5.1. 定义与语法
  1. 5.1.1. 渐变起点
  2. 5.1.2. 渐变形状
  3. 5.1.3. 渐变大小
  4. 5.1.4. 渐变色标
2. 5.2. 用法
  1. 5.2.1. 基本用法
  2. 5.2.2. 更多用法
    1. 5.2.2.1. 示例1
    2. 5.2.2.2. 示例2
    3. 5.2.2.3. 示例3
6. 重复径向渐变
7. 参考列表

⚠️注意：由于CSS3中的部分内容尚未完全定稿，所以本文的部分可能会随时更新。

缘起

在之前的一篇文章CSS3背景中，我们有谈到background-image属性，此属性用于设置元素的背景图片，我们可以为之赋值一个图片url，还可以使用CSS3提供的渐变（gradient）技术来设置一张渐变的纯CSS背景。

CSS3支持的渐变可分为线性渐变（linear-gradient）、径向渐变（radial-gradient）、重复线性渐变（repeating-linear-gradient）和重复径向渐变（repeating-radial-gradient）。

兼容性

由于W3C官方组织尚未对渐变这一块完全定稿，虽然主流的现代浏览器基本都已经对渐变提供了支持，但是具体的实现细节可能不太一致，需要针对不同的浏览器内核添加私有前缀。

下图是摘自www.w3cschool.cn的浏览器兼容性图表，可供参考。

线性渐变

定义与语法

什么叫线性渐变？

颜色沿着一条直线过渡，比如从左侧到右侧、从右侧到左右、从顶部到底部、从底部到顶部、从左上角到右下角等等，简单来说渐变方向是一条直线，此直线可以沿着任意轴。如果有过PS、flash等软件或者设计经验的话，应该不难理解。

W3C规定的线性渐变语法如下，

background-image: linear-gradient(direction, color-start, ..., color-end);

即，linear-gradient包含如下几个基本参数，

第一个参数为渐变方向
第二个参数为渐变起点
第三个参数为渐变终点

同时，你还可以在渐变起点和渐变终点中间插入任意多个色标来达到多重颜色渐变的目的。

渐变方向

关于渐变方向，我们可以设置为一些常用关键词，比如top、right、bottom、left，以及这四个基本关键词的任意相邻方向的两两组合，比如top left、top right等等。

渐变方向除了可以设置为常用关键词之外，我们还可以设置一个角度值，即0deg～360deg。这个角度值也可以为负值。正负值的区别在于渐变方向相对于默认值的方向是不同的。

⚠️注意，此参数可以省略。当渐变方向省略时，W3C规定的渐变方向默认值为top，即渐变方向从上到下。

渐变起点

线性渐变的渐变起点其实是一个颜色值（后面说到的径向渐变也有渐变起点的概念，但是此起点非彼起点），而且还可以包含一个长度值，此长度值可省略。长度值存在的含义是，可以对渐变起点进行偏移。

渐变终点

渐变终点为一个颜色值，也可以包含一个长度值，此长度值可省略。长度值存在的含义是，可以对渐变终点进行偏移。

值得一提的是，渐变终点的偏移效果与渐变起点的偏移效果是不一样。欲知详情，请继续往下看????。

用法

基本用法

下面有一段示例，让我们一起来体验一下（为了方便，css部分的代码仅给出了webkit内核的声明）



    -webkit-linear-gradient(top, pink, green);


    -webkit-linear-gradient(bottom right, pink, green);


    -webkit-linear-gradient(45deg, pink, green);

其效果如下图所示，

重复线性渐变

我们可以使用repeating-linear-gradient来达到重复线性渐变的目的。所谓的重复线性渐变，就是沿着线性渐变线的两个方向上无线延伸重复。在这里需要注意一点就是，我们在设置渐变色标时应该同时给出其偏移量，否则无法实现重复渐变的效果。

让我们来看个简单的例子，

.div1 {
    background-image: -webkit-repeating-linear-gradient(top left, pink 50px, green 100px);
}

其效果如下，

径向渐变

定义与语法

什么叫径向渐变？

不同于线性渐变，所谓的径向渐变其实就是圆形或者椭圆形渐变，其颜色渐变的轨迹不再是沿着一条直线，而是从一个点开始，向所有方向进行辐射。相对线性渐变要稍微复杂一些。

W3C规定的径向渐变标准语法如下，

background-image: radial-gradient(center, shape size, start-color, ..., last-color);

所以，radial-gradient将包含如下几个参数，

第一个参数为渐变起点
第二个参数为渐变形状和渐变大小
第三个参数为渐变起点色标
第四个参数为渐变终点色标

我们可以在渐变起点色标和渐变终点色标之间插入任意多个渐变中间色标。

渐变起点

所谓渐变起点即是径向渐变的的开始坐标。此参数可以使用常用的位置关键词，比如top、right、bottom、left、center，或者是上右下左的两两相邻组合。除此之外还可以赋值为类似background-position属性的值，即使用长度坐标或者百分比坐标。

此参数的默认值为center，且可以省略。

渐变形状

shape定义了渐变形状。径向渐变只有两种渐变形状，一种是椭圆（ellipse）一种是圆形（circle）。其实圆形径向渐变是一种特殊的椭圆径向渐变，因为此时径向渐变的主半径（major-radius）和次半径（minor-radius）是相同的。

此参数的默认值为ellipse，且可以省略。

渐变大小

size定义了渐变大小。其实此参数的本质是设置径向渐变的主渐变半径和次渐变半径。如下图，

其中水平方向是主渐变半径，垂直方向是次渐变半径。当主次半径一致时既是圆形，不一致时既为椭圆。

与线性渐变中的长度值参数相似，我们可以为渐变大小size设置一个css允许的度量单位，如px、em等，也可以使用百分比（％）。除此之外，我们还可以设置一些特殊的关键词，如下

closest-side，指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner，指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side，指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner，指定径向渐变的半径长度为从圆心到离圆心最远的角

当然，我们可以对size不作任何自定义设置，此时的默认值为farthest-corner。各个关键词的效果如下图，

⚠️注意1：如果我们将渐变起点、渐变形状及渐变大小这几个参数都省略，既都采用默认值，此时径向渐变的最终形状将根据容器的宽高来自动计算确定。

⚠️注意2：需要特别注意的是，渐变形状和渐变大小（即shape和size）的本质其实都是设置径向渐变的最终形状的，所以在某些时候这两个参数可能不能同时设置。

比如有如下的css代码，

background-image: -webkit-radial-gradient(center, circle 50px 100px, pink, green);

那么浏览器将不知道如何渲染，因为你既设置了关键词circle，但是又同时设置了主半径和次半径，而且主次半径还不相同。我们知道主次半径不一致的结果将会呈现出一个椭圆，但是之前又明确设置了circle，此处将会有冲突。

渐变色标

径向渐变的色标跟线性渐变的色标类似。也有两个关键的渐变色标，一个是渐变起点色标，一个是渐变终点色标，且这两个色标都可以设置一个长度值（或者百分比）。

当为渐变起点色标设置长度（或者百分比）时，渐变起点将会发生偏移，偏移点为真正开始渐变的点。
当为渐变终点色标设置长度（或者百分比）时，渐变终点将会发生偏移，偏移点为真正终止渐变的点。
可以在渐变起点色标和渐变终点色标之间插入任意多个色标，来达到多色径向渐变的目的。

用法

基本用法

下面有一段示例，让我们一起来体验一下（为了方便，css部分的代码仅给出了webkit内核的声明，下同）


width: 400px; height: 400px;
width: 400px; height: 200px;

其效果如下图，

这是径向渐变最基本的使用方法，CSS代码中我们仅设置了渐变色标起点和渐变色标终点，其他的参数都采用默认值。从图中可以看出，

渐变起点为容器的中心，渐变方向为以起点为中心向四周辐射。
渐变颜色从内到外由粉色到绿色平滑过渡。
此时径向渐变的最终形状将由容器的大小确定。前一个容器的宽高一致，渐变形状为圆形，后一个容器的宽高不一样，渐变的形状为椭圆形。

重复径向渐变

我们可以使用repeating-radial-gradient来达到重复径向渐变的目的。与重复线性渐变一样，我们在设置渐变色标时需要同时给定偏移量，否则无法实现重复渐变的效果。

让我们来看个简单的例子，

.div1 {
    background-image: -webkit-repeating-radial-gradient(top left, pink 50px, green 100px);
}

其效果如下，

参考列表

MDN:linear-gradient()
MDN:radial-gradient()
css3-gradients
css3-linear-gradient
css3-radial-gradient
深入理解CSS3 gradient斜向线性渐变

CSS3阴影和反射

2018-06-07 17:09 更新

大纲

1. CSS3阴影
1. 1.1. 文本阴影
2. 1.2. 容器阴影
3. 1.3. 多重阴影
4. 1.4. 兼容性
2. CSS3反射

对网页设计人员来说，阴影可能是比较常用的一种用来增强页面修饰的手段（可能反射用的频率较少）。在CSS3支持阴影和反射效果之前，大部分的解决方案都是通过图片来展现所需要的效果，但是我们知道使用图片往往会有各种弊端。本篇文章将会阐述CSS3中阴影和反射的一系列使用方法。

CSS3阴影

在CSS3中，与阴影相关的具体属性有text-shadow和box-shadow，分别表示文本阴影和容器阴影。

文本阴影

实际上，text-shadow并不是在CSS3中新增的的新属性，在CSS2.0时就已经有了这个属性了，之后在CSS2.1不知何故被移除了，最终在CSS3中又重新收纳了这个属性。

语法，

text-shadow：none |  [ ,  ]*

其中， = {2,3} && ?，即可以设置为2个（或者3个）的长度单位（只要是CSS中允许的长度标识单位皆可，比如px，em等）加上一个颜色值。其默认值为none。下面是一个使用text-shadow的例子，

text-shadow: 1px 2px 2px #5678AF

其效果如下图，

参数说明如下，

默认值none，表示没有阴影。
第一个长度值用于设置文本阴影的水平偏移值，可以为负值。
第二个长度值用于设置文本阴影的垂直偏移值，可以为负值。
第三个长度值用于设置阴影的模糊半径，不可为负值。此参数可省略。
颜色值用于标识阴影的具体颜色。

容器阴影

box-shadow用于给容器设置阴影。其用法比text-shadow相比要复杂一点。其具体语法如下，

box-shadow：none |  [ ,  ]*

其中， = inset? && [ {2,4} && ? ]，即可设置：是否为内阴影，2个~4个的长度单位加上一个颜色值。下面是一个使用box-shadow的示例，

其效果如下图，

参数说明如下，

默认值none，表示没有阴影。
第1个长度值用来设置对象的阴影水平偏移值。可以为负值。
第2个长度值用来设置对象的阴影垂直偏移值。可以为负值。
如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值。
如果提供了第4个长度值则用来设置对象的阴影外延值。
inset用于设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影。

这里对box-shadow的第四个长度参数多叨唠几句。第四个长度参数用于设置阴影的外延值。这个参数经常被忽略，其实在有些场景下还是挺有用处的。此参数的默认值为0，我们将此值赋值为阴影模糊半径的负值来抵消模糊值，从而得到单边阴影的效果。下面是一个例子，

.div1 {
    box-shadow: 0 8px 6px #565656;
}
.div2 {
    box-shadow: 0 8px 6px -6px #565656;
}

其效果如下，

左侧的div1未设置阴影外延值，右侧的div2设置了一个负的外延值，且数值与阴影模糊半径一致。

多重阴影

无论是text-shadow还是box-shadow，都是支持多重阴影的。就是可以给text-shadow或者box-shadow属性设置多组阴影值。如下，

.text-shadow {
    text-shadow: 1px 1px 5px gold, 5px 5px 2px pink, -2px -2px 6px green;
}
.box-shadow {
    box-shadow: 2px 4px 6px pink, -2px -4px 6px green;
}

其效果如下，

从效果图中可以看出，我们可以利用多重阴影搭配不同的阴影颜色做出各种玄幻的效果。唯一限制你的就是你的想象力。????

兼容性

描述阴影的两个CSS3属性在现代浏览器上表现良好（需要带上不同浏览器内核的私有前缀），但是老旧的浏览器并不支持。

文本阴影text-shadow的兼容性如下图，

需要注意的是，文本阴影IE系浏览器到IE10才支持，之前版本的IE浏览器中要实现阴影效果需要使用IE的相关私有实现（即IE滤镜的用法，不过这里不准备对其进行描述，想要了解更多关于IE滤镜的内容请自行查阅相关资料）。

容器阴影box-shadow的兼容性如下图，

CSS3反射

CSS3中对反射（或者说倒影）提供了支持。那么，什么是反射（或者说倒影）？让我们先来看张效果图。

CSS3中提供此效果的属性叫做box-reflect，其语法如下，

box-reflect：none |  ? ?

none，为默认值，表示无反射。
，反射的方向，可选值为above，below，left，right。
，表示本体和反射之间的间隔，可设置为长度值也可设置为百分比。此参数可省略，默认为0。
，用于设置反射的遮罩，可设置为渐变或者一个图片。此参数可省略。

上述效果对应的css代码如下，

.box-reflect {
    -webkit-box-reflect: below 20px -webkit-linear-gradient(top, transparent, rgba(255,255,255,.3));
    width: 560px;
    font-size: 4em;
    color: gold;
}

在应用反射时，有一点需要注意一下，就是我们要为反射的方向（即参数的方向）预留足够的空间，否则会导致页面看起来无反应，因为没有足够的空间用来展示反射。

其浏览器兼容性如下图，

CSS3反射可以很简单的解决之前必须使用图片才能解决的倒影问题，不过由于一些浏览器的支持问题，使得这个属性貌似使用的不是很广泛。

这里有一篇w3cplus上介绍反射的文章使用CSS3制作倒影，我觉得挺基础的，有兴趣的可以参阅。

文章中所有的浏览器兼容性图片资源均来自http://www.w3chtml.com。

CSS3圆角

2018-06-07 17:10 更新

大纲

1. 参考列表

注意：由于CSS3中的部分内容尚未完全定稿，所以本文的部分可能会随时更新。

CSS Level3中正式开始支持圆角属性，官方给出的文档在这里。本篇文章将会介绍CSS3中border-radius的相关知识和用法。

在CSS3支持圆角之前，我们要想实现圆角效果，得用多张图片进行定位，经过一系列精细的调试才能得到想要的效果。这种方法也是无奈之举，而且很麻烦，同时它具有几个不可避免的弊端，

增加了页面文件及静态资源的维护成本
增加了额外的网络带宽消耗（因为需要加载更多的图片）

现在直接对元素设置border-radius属性即可达到圆角的效果。其语法如下，

border-radius: {1-4} | % / {1-4} | %;

即，可以设置

1～4长度值
一个百分比
可以设置两组值，使用／连接

比如，我有如下的代码，

其效果如下，

上述的代码中，我只给border-radius属性设置了一个值。其实border-radius跟border属性时很相似的，它是一个复合属性，可分为左上、右上、左下、右下共四个可赋值项。前面说过，border-radius可以赋值1～4个值，

设置1个值时，四个方向都使用同一个值
设置2个值时，左上和右下使用第一个值，右上和左下使用第二个值
设置3个值时，左上使用第一个值，右上和左下使用第二个值，右下使用第三个值
设置4个值时，分别对应左上、右上、左下、右下的顺序进行赋值

除了直接设置1～4个长度单位之外，我们还可以设置百分比（％），比如

#border-radius {
    width: 200px;
    height: 200px;
    background-color: #0a0;
    border: 1px solid;
    border-radius: 10% 20% 50%;
}

其效果如下，

其实border-radius属性意为边框半径，它分为水平半径和垂直半径，如下图

我们在设置border-radius时其实还可以使用形如下面示例的赋值方式，

#border-radius {
    width: 200px;
    height: 200px;
    background-color: #0a0;
    border: 1px solid;
    border-radius: 10px 50px 15px 50px/5px 20px 10px 20px;
}

其效果如下，

我们可以给水平或者垂直半径分别进行赋值。所以，我们可以给不同方向设置圆角，同时还可以分别设置其水平或者垂直半径来达到不同曲率的圆角。

当我们使用／设置圆角时，第一组属性为水平半径的赋值，第二组值为垂直半径赋值。且赋值的方向规律与前述一致。

除此之外，CSS3还支持对元素的某个角进行赋值，

border-top-left-radius，左上角
border-top-right-radius，右上角
border-bottom-right-radius，右下角
border-bottom-left-radius，左下角

这四个属性都可以设置1～2个值，如下

.test {
    border-top-left-radius: 10px 20px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

若设置一个值，则表示水平半径和垂直半径相同
若设置两个值，则表示分别按顺序设置水平、垂直半径

兼容性：虽然目前各大主流现代浏览器都支持border-radius属性，不过在具体的实现细节上可能会有所差别，针对不同的浏览器需要添加各自的浏览器兼容前缀。

参考列表

http://www.w3.org/TR/css3-background
CSS3圆角详解

CSS3媒体查询与自适应网页设计

2018-06-07 17:11 更新

大纲

1. 前序
2. 媒体类型（Media Type）
3. 媒体查询（Media Query）
4. 自适应（响应式）网页设计
1. 4.1. 自适应布局的局限性
5. 兼容性
6. 参考列表

前序

Media Query（媒体查询）是CSS3中的新增内容，用于定义不同媒体类型在不同CSS属性时的样式表现。

在以前，如果我们想同一个网站对不同设备（比如PC端，手机端，平板端等等）提供支持，一般性的做法是针对不同的设备额外实现一套页面，在web端判断出访问设备类型时再路由到不同的实现。

这种做法的弊端很明显，因为额外的实现，所以后续的更新及维护都比较繁琐且成本越来越高。那么我们有没有一种方法，就是只有一份实现但是可以根据不同的设备自动做展现上的调整。Media Query为这种思路的实现提供了支持。

这里是一个例子，当改变浏览器窗口的大小时，页面上文本的颜色将会发生变化。其实现原理就是使用Media Query。

媒体类型（Media Type）

我们先来谈一谈媒体类型的相关内容。那么，何为媒体类型呢？

注意之前我们有说到，所谓媒体查询就是针对不同媒体类型在不同CSS属性时的样式表现。注意这句话，它有两个要素，第一是针对不同媒体类型，第二是针对CSS属性。

具体点，我们来点代码，如下，

@media screen and (width: 888px) {
    p {
        color: gold;
    }
}

其中，

@media是关键字（可以将其理解成css的一种语法糖，跟@import类似）
screen，这个关键字就是我们所说的媒体类型（这里screen其实就是电脑屏幕）
width: 888px，需要查询的CSS属性

所以上面的CSS Media Query代码要表达的意思就是：当页面在电脑屏幕上展现时，且屏幕的width（宽度）属性为888px时，设置所有的p标签元素的字体颜色为gold（土豪金，哈哈~）。

除了上面提到的screen，常见有媒体类型如下表,

媒体类型	备注	是否常用
`all`	匹配所有设备	是
`braille`	盲文设备	否
`embossed`	盲文打印	否
`handheld`	手持设备	否
`print`	打印模式	是
`projection`	演示模式、幻灯片等	否
`screen`	电脑屏幕	是
`speech`	演讲	否
`tty`	固定字母间距的网格的媒体，比如电传打字机	否
`tv`	电视媒体	否

看到上面关于媒体类型的表格后，其实我们常用的也就all、print、screen这几种类型。其中screen要属于最常用的媒体类型了。

在具体使用media type时，我们还可以使用not或者only这两个关键字修饰媒体类型，比如

@media only screen and (width: 888px) {
    /* your css code */
}

或者

@media not print and (width: 888px) {
    /* your css code */
}

其中，前者（only修饰词）表示@media设置的样式只对screen类型适用；后者（not修饰词）表示@media设置的样式对除了print类型之外的所有设备类型生效。

媒体查询（Media Query）

说完了媒体类型，我们再来说一说媒体查询。其一般的语法如下，

@media screen and (width: 888px) {
    /* your css code */
}

媒体查询中查询两字的含义就体现在screen和width: 888px上（可能更加倾向后者）。换句话说，screen和width: 888px其实都是查询的条件，当有多个条件时，我们使用and将他们连起来。

上面的示例代码中，查询页面的width属性，当其宽度为888px时，将应用特别设置的样式。

不过Media Query所支持的CSS属性是有限的，与一般的CSS属性并不一致，而且会有一些特别的可选项。如下表，

可查询属性	属性值类型	是否可用Max/Min前缀	描述	常用
`color`	整数	是	定义每一组输出设备的彩色原件个数。如果不是彩色设备，则等于0	否
`color-index`	整数	是	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则等于0	否
`width`	长度	是	定义输出设备中的页面可见区域宽度	是
`height`	长度	是	定义输出设备中的页面可见区域高度	是
`device-width`	长度	是	定义输出设备的屏幕可见宽度（设备本身的宽度）	是
`device-height`	长度	是	定义输出设备的屏幕可见高度（设备本身的高度）	是
`orientation`	`portrait`/`landscape`	否	定义`height`是否大于或等于`width`。值`portrait`代表是（竖屏），landscape代表否（横屏）	是
`aspect-ratio`	整数/整数	是	定义`width`与`height`的比率（宽高比）	是
`device-aspect-ratio`	整数/整数	是	定义`device-width`与`device-height`的比率（宽高比）。如常见的显示器比率：4/3, 16/9, 16/10	是
`monochrome`	整数	是	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则等于0	否
`scan`	`progressive`/`interlaced`	否	定义电视类设备的扫描工序	否
`grid`	整数	否	用来查询输出设备是否使用栅格或点阵。只有`1`和`0`才是有效值，`1`代表是，`0`代表否	否
`resolution`	dpi/dpcm	是	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm	否

看过上面的表格之后，我们会发现其实Media Query就是为了不同设备而诞生的。就目前而言，我们常用的查询属性也就那么几个，大部分与宽高有关系（其实就是设置的展现区域大小）。

从上面的表格中，我们可以看出有部分的可查询属性还有添加max-或者min-前缀进行修饰。比如，

@media screen and (min-width: 961px) and (max-width: 1200px) {
    p {
        color: pink;
    }
}

上面代码的含义是指，当展现页面的宽度大于960px且小于1200px时，将p标签的字体颜色设置为粉色。

这个例子中，我们使用了width和height这两个可查询属性，而且还使用了max和min对齐进行修饰，分别表示最小宽度和最大宽度。

自适应（响应式）网页设计

Responsive Web Design，国人将其翻译成响应式Web设计，个人觉得翻译成自适应Web设计可能更佳。它的意思就是可以自动识别屏幕宽度、并做出相应调整的网页设计。

我们可以使用CSS3的Media Query做一些自适应的网页设计。比如，

上述代码的含义很明确，查询屏幕的宽度属性，根据不同的宽度加载不同的css文件。

有时候我们为了减少css文件的解析，将所有的媒体查询代码写在同一个css文件中，在html中仅作一次加载。如下，

@media screen and (max-width: 480px) {
    /* your css code */
}
@media screen and (min-width: 481px) and (max-width: 600px) {
    /* your css code */
}
/* more css code */

这两种做法的效果是一致的。

下面是一些示例网站，可以访问它们，然后改变浏览器的大小观察其展示的变化。

Hicksdesign，不同的屏幕大小将导致页面的侧栏发生变化。
A List Apart，不同的屏幕大小将导致页面导航栏和图片行数发生变化。
Colly，不同的屏幕大小将导致页面图片的分列不同。

自适应布局的局限性

这里额外说一点，所谓的自适应布局远远没有这么简单，并不是靠着在不同屏幕大小上对页面布局做一些调整就可以了。

它还将面临下面的几个问题，

不同屏幕尺寸下，图片（视频）等资源的展示如何处理
在较小的屏幕尺寸下，往往需要对一些元素进行隐藏，这势必会造成流量（带宽资源）的浪费
即使一套页面可以自适应好几种设备了，此时一旦有更新，需要同时维护各个设备相关的css代码并且要做好协调
…

兼容性

IE8（及其以下都不支持）
IE9+
Chrome 5+
Opera 10+
Firefox 3.6+
Safari 4+

关于Media Query浏览器的兼容性，除了IE8及其以下的浏览器不支持，其他的主流浏览器基本上都支持（这里不考虑Firefox、Safari、Opera这些浏览器的低版本了）。要是实在要想在IE8上使用媒体查询，需要用到引入额外的js插件css3-medieaqueries.js。

参考列表

css3-mediaqueries
自适应网页设计（Responsive Web Design）
什么是响应式Web设计？怎样进行？
CSS3 Media Queries 实现响应式设计

CSS3新特性概述

css3新增特性

选择器的拓展

页面布局的加强

多列布局方式

可变更的盒模型

可伸缩的布局方式

元素修饰的加强

RGBA和透明度

圆角支持

多背景图片支持

渐变效果支持

阴影和反射效果

开放字体的支持

多终端的适配

动画支持

详解

初识CSS3选择器

属性选择器

结构伪类选择器

UI元素状态伪类选择器

目标伪类选择器

否定伪类选择器

通用兄弟元素选择器

CSS3多列布局

语法及兼容性

示例

简化语法

参考列表

CSS3 Flexbox属性与弹性盒模型

简介

初识Flexbox

相关概念

新旧语法

属性详解

问题引导

display: flex

flex-direction

flex-wrap

flex-flow

order

flex条目的弹性设置

flex-basis

flex-grow

flex-shrink

多行弹性布局的注意事项

flex复合属性

flex条目的对齐

基于margin: auto对齐

基于主轴对齐

基于交叉轴对齐

flex行的对齐

浏览器兼容性

参考列表

CSS3背景

已有属性

background-color

background-position

background-repeat

background-attachment

background-image

新增属性

background-size

background-clip

background-origin

CSS3 Multiple Background

参考列表

CSS3渐变

缘起

兼容性

线性渐变

定义与语法

渐变方向

渐变起点

渐变终点

用法

基本用法

更多用法

重复线性渐变

径向渐变

`display: flex`

`flex-direction`

`flex-wrap`

`flex-flow`

`order`

`flex-basis`

`flex-grow`

`flex-shrink`

`flex`复合属性

基于`margin: auto`对齐

`background-color`

`background-position`

`background-repeat`

`background-attachment`

`background-image`

`background-size`

`background-clip`

`background-origin`