8.1 盒子新特性
8.1.1 盒子阴影 box-shadow
属性：box-shadow
作用：用于设定一个盒子的阴影效果
形式：box-shadow：水平偏移值 垂直偏移值 [模糊值] [外延值] [颜色] [inset]；
说明：
1，至少设置两个长度值，分别表示阴影的水平偏移量和垂直偏移量，可以为负；
2，模糊值是设定阴影的模糊效果的宽度，可以不设置，则默认为0；
3，外延值是设定阴影再“扩大”的宽度，可以不设置，则默认为0；
4，inset表示设置“内阴影”，可以不设置，则默认为外阴影。
8.1.2 圆角边框 border-radius
属性：border-radius
作用：用于设定一个盒子的圆角特性。
形式：border-radius: 水平圆角半径 [/ 垂直圆角半径]；
说明：
1，垂直半径可以省略，则其同水平半径的值。
2，半径设置可以提供1~4个值，具体如下。
提供1个：4个角都为该值；
提供2个：第1个表示上左和下右，第2个表示上右和下左；
提供3个：第1个表示上左，第2个表示上右和下左；第3个表示下右；
第供4个：分别代表4个角上的半径（依次上左，上右，下右，下左）
8.1.3 图像边框border-image
边框背景的主要属性有：
border-image-source: 设置作为边框背景的图片源；
border-image-slice: 设置要将边框背景图片进行“切割”的分割方式。形式为：
border-image-slice: 数值 [fill]; //特别注意：这里的数值不带单位！
其中“数值”可以是1-4个值，分别代表上右下左4个方向的“切割厚度”。
fill代表“填充”，用于中间区域填充到盒子内容区。
border-image-width: 设置图片边框的宽度，也可以设定1-4个值。
通常设定为auto（自动），此时就会使用border-image-slice所设定的切割厚度。
border-image-repeat: 设置边框背景的填充方式，可以设定1-2个值，表示横向和纵向的填充方式。
可用值如下：
stretch： 指定用拉伸方式来填充边框背景图，这是默认值，也最常用，推荐使用。
repeat： 指定用重复平铺方式来填充边框背景图。类似背景图的repeat，背景图不改变大小。
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。
注：有的浏览其中应用边框图属性需同时设定border属性。
8.1.4 背景图高级特性
前面有关一个盒子的背景设置，我们主要学习了这几个基本属性：
background-color: 设置背景颜色。
background-image: 设置背景图像源文件。
background-repeat: 设置背景图像的重复性，可用值：repeat, no-repeat, repeat-x, repeat-y。
background-position: 设置背景图片起始位置或定位位置。
background: 上述几个属性的综合属性。
有关盒子的背景设置，在CSS3中，又增加了几个属性，如下所示：
background-attachment：
设置背景图像的滚动特性，可用值有：
scroll： 相对于当前盒子固定（盒子滚动，则背景图也会滚动），这是默认值。
local： 相对于当前盒子的内容固定（内容滚动，则背景图也会滚动）。
fixed： 相对于当前浏览器窗体固定（类似固定定位，即它会始终在窗口的某个位置）。
background-origin:
设置背景图像的参考原点（位置），实际就是背景出现的范围。可用值有：
border-box： 在boder区域范围内（含border）。
padding-box：在padding区域范围内（含padding），这是默认值。
content-box： 在内容区域范围内。
此属性主要是跟background-position的位置计算有关。
background-clip:
设置背景图像向外裁剪的区域，裁剪范围以外就被裁剪了(不显示)。可用值有：
border-box： 从border区域外沿（即不含border）开始向外裁剪背景，这是默认值。
padding-box：从padding区域外沿（即不含padding）开始向外裁剪背景。
content-box： 从content区域外沿开始向外裁剪背景。
background-size: 值1 [, 值2]
设置背景图像的大小，可设置2个值，分别表示横向和纵向的大小。可用值有：
长度： 用长度值指定背景图像大小。不允许负值。
百分比： 用百分比指定背景图像的缩放大小。不允许负值。
auto： 背景图像的真实大小。
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像不超出容器。
8.1.5 渐变背景 gradient
渐变背景其实是设置background-image属性的值，设置的不是一个单一颜色，而是多个颜色，并按给定方式进行渐变。
8.1.5.1线性渐变linear-gradient
含义：线性渐变是让背景颜色按照某个方向（角度）的方式来进行过渡变化。
语法： background-image：linear-gradient([角度，] 颜色1，颜色2 [，颜色n...] );
说明：
1，角度以从下到上（12点整的方向）为0度，顺时针为正角度，默认为180度。
2，角度还可以使用to left，to right，to top， to bottom这几个关键字；
2，至少设置2个颜色（这样才能实现渐变）；可设置多个颜色，都能自动实现渐变；
3，每个颜色还可以设置“截止位置”，表示该颜色在渐变中的“关键点”（位置），形式为：颜色 位置，比如：red 30px; 或 #00ff00 20%;
8.1.5.2 径向渐变radial-gradient
含义： 径向渐变是让背景颜色从某个中心点以圆或椭圆向外扩散的方式来进行过渡变化。
语法： background-image：radial-gradient( 形状 [at 位置，] 颜色1，颜色2 [，颜色n...])
说明：
1，形状可以是circle（圆）或ellipse（椭圆），默认是跟随盒子（可能是圆，也可能是椭圆）；
2，大小是指渐变从圆心开始向外进行过渡变化的距离（半径），圆用一个值，椭圆用2个值（空格隔开）；
大小还可以使用如下4个关键字：
farthest-corner： 最远角，表示从圆心开始，渐变到最远的角的位置。下面也类似；
farthest-side： 最远边；
closest-corner： 最近角；
closest-side： 最近边；
3，位置可以是一个值（表示横坐标，纵坐标默认居中），或2个值（横纵坐标，空格隔开）；位置还可以使用top， right， bottom，left，center这5个关键字；
4，颜色至少包含2个，每个颜色还可以设定“截止位置”；
8.2 多栏布局 column
8.2.1 基本概念
所谓多栏布局，就是一个盒子设置栏宽属性或栏数量属性，就构成多栏布局，则其中的内容，会先在第一栏展示，第一栏展示满后，再展示到第二栏，以此类推。
多栏布局最常见的就是杂志或报纸上常见的“分栏版面”。比如杂志最常用的是分为两栏。
多栏布局通常用于盒子内部主要以文字（行内元素）为主的情形。
给一个盒子设定栏宽属性或栏数量属性（二选一），就可以实现多栏布局效果。
8.2.2 主要属性
栏宽度属性column-width
设定分栏布局中一个栏的宽度值；实际宽度会根据外层盒子的宽度有所调整（可能变大）。
栏数量属性column-count
设定分栏布局中的总栏数。
columns属性：
上述column-width和column-count的综合属性；
使用形式：columns: 栏宽值 栏目数；
实际表现上，当总宽度大于等于“栏宽x栏目数”时，栏目数固定，栏宽可能会有所调整（变大）。
当总宽度小于“栏宽x栏目数”时，栏目数会减少（保证栏宽不小于设定的栏宽）。
栏间隙属性column-gap
设定栏与栏之间的宽度值，默认是font-size大小（比如14px）
栏分割线属性column-rule
栏分割线属性，就是两栏之间的线，如果不设定默认就是“空的”，就没有分割线，只有间隙（gap）。
栏分割线属性类似边框线（但只是一条线），可以设定：线宽，线型，线色。
有如下几个属性：
column-rule-width：设定线宽，比如1px，5px；
column-rule-style：设定线型，比如solid，dashed，dotted；
column-rule-color：设定线色，比如red， #ff9966， rgb(200,100,0)
column-rule：上述3个属性的综合属性。
8.3 弹性布局 flex
8.3.1 基本概念
弹性布局是指，可以设定一个容器盒子中的若干个（数量可变的）子盒子，在父盒子中的横向或纵向有序整齐排列。其典型应用就是页面中的导航布局的实现
弹性布局的实现，主要是在父盒子（容器盒子）上定义相应的属性，则其内部的子盒子就能够按照所定义的样式进行显示。
8.3.2 主要属性
弹性布局的主要属性设置包括如下几个：
display: flex;
说明：设置盒子的显示模式为弹性盒模型，即该盒子成为了弹性盒模式的容器盒子。
flex-direction:
说明：设置弹性盒模式的子盒子的排列方式，有如下4个方式（4个属性值）：
row：横向排列，
row-reverse：横向排列，但顺序反向
column：纵向排列
column-reverse：纵向排列，但顺序反响
flex-wrap：
说明：设置弹性盒模式的子盒子超出时的换行特性，常用属性值有：
nowrap：不换行，尽量在一行显示，这是默认值。
此时有可能会超出父盒子（当子盒子有最小宽度设置时）。
wrap：自动换行。
wrap-reverse：换行，但反向显示（即其实显示到上一行去了）
justify-content：设定的是一行中子盒子在主轴方向的排布方式
说明：设置子盒子的主轴方向的一行中的排布方式。
所谓主轴就是由flex-direction所决定的方向为主轴，对应另一个方向为辅轴。
假如flex-direction为row或row-reverse，则横向为主轴，纵向为辅轴。
假如flex-direction为column或column-reverse，则纵向为主轴，横向为辅轴。
常用属性值有：
flex-start：子盒子从所设定的起始位置开始排列出来，空隙留后面；
flex-end：子盒子从所设定的终止位置开始排列出来，空隙留前面；
center：子盒子完全从居中的位置开始排列出来，空隙留两边；
space-between：子盒子两边紧靠父盒子，空隙留在相互的中间且均等；
space-around：子盒子均衡布置，分布给每个盒子的空隙都一样。
align-content： 设定的是多行情况下"行"在辅轴方向的排布方式
说明：设置子盒子在辅轴方向的排布方式，大于一行且辅轴有多余空间时时才有效。
常用的属性值有：
flex-start：子盒子从所设定的起始位置开始排列出来，空隙留后面；
flex-end：子盒子从所设定的终止位置开始排列出来，空隙留前面；
center：子盒子完全从居中的位置开始排列出来，空隙留两边；
space-between：子盒子两边仅靠父盒子，空隙留在相互的中间；
space-around：子盒子均衡布置，空隙均衡出现；
align-items： 设定的是一行中的多个子盒子在辅轴方向的排布方式
说明：设置子盒子在当前行中辅轴方向的对齐方式。
flex-start：子盒子定位于所设定的起始位置，空隙留后面；
flex-end：子盒子定位于设定的终止位置，空隙留前面；
center：子盒子定位于居中的位置，空隙留两边；
baseline：子盒子定位于基准位置；
stretch：子盒子进行拉伸（充满纵轴）；
8.4 2D变换 transform(2D)
8.4.1 基本概念
2D变换的基本含义是：将浏览器页面（电脑屏幕所在面）当做一个二维平面，然后，通过CSS的设置，使网页元素能够在这个平面上进行“形状变换”。
简单说就是，在一个元素的“本来”外观表现上，可以对其实行：位移，旋转，缩放，斜拉变形等。
8.4.2 主要属性
transform：
这是最主要的变换属性；其实所有变换都是通过这个属性，使用不同的值来实现的。
而所用不同的值，主要就是指定不同的变换函数（一个单词），以及所需要变换的数值；
常用2D变换形式如下：
transform: translatex(值)： 将元素水平移动给定的值；
transform: translatey(值)： 将元素垂直移动给定的值；
transform: translate(x值，y值)： 同时进行水平和垂直移动；
transform: rotate(角度值)： 将元素旋转给定的角度；
旋转的方向是：正值为顺时针方向，负值为逆时针方向；
transform: scalex(比例值)： x方向进行缩放；
transform: scaley(比例值)： y方向进行缩放；
transform: scale(x比值, y比值): 同时进行水平和垂直方向的缩放；
transform: skewx(角度值)： 将元素从x方向拉伸给定的角度；
transform: skewy(角度值)： 将元素从y方向拉伸给定的角度；
transform: skew(x角度,y角度): 将元素从x和y方向拉伸给定的角度；
特别注意：
1，对一个元素可以同时进行多项变换。
2，进行多项变换时，多个变换属性值要一并写在一起，相互之间用空格隔开，类似这样：
transform: translatex(5px) translatey(10px) rotate(20deg) scale(1.5, 2);
3，对于进行了变换的元素，虽然形状或位置都可能变了，但并不影响其他元素(即不影响布局效果)。
transform-origin：
指定变换时的“原点”（基点）；默认是该变换元素的“中心点”（center, center）；形式：
transform-origin：水平坐标 垂直坐标；
其中： 水平坐标可以用一个长度值，或百分比，或left，center，right；
垂直坐标可以用一个长度值，或百分比，或top，center，bottom；
8.5 3D 变换 transform(3D)
8.5.1 基本概念
3D变换是在2D变换的基础上，再加上一个维度（z轴），构成了三维空间。
新加上的这个z轴，是跟网页页面（电脑屏幕）垂直的那个方向，也就是眼睛到屏幕的“垂直线”。
z轴的正方向是从屏幕到眼睛的方向
8.5.2 主要属性
3D变换仍然还使用2D变换的2个属性（transform和transform-origin），不过在transform的属性值中，又增加了若干变换函数，以达到在3D空间中将盒子进行某种变换操作的目的。
另外，对于3D变换，还会多出来几个属性，分别用于设定3D变换场景下所需要的一些特征信息。
3D变换的主要属性有：
transform-style：
用于设定元素变换的方式（2D还是3D），默认是flat（平面，也就是2D）；
设置为preserve-3d，就可以实现3D变换。
注意：该属性应该设置在变换元素的父级元素上。
perspective：
透视距离，用于设定观察3D视图时眼睛离屏幕（也就是z=0）的距离，即观察点的远近。
默认透视距离是“无穷大”，即最远处。
注意：该属性应该设置在变换元素的上级元素上。
perspective-origin：
透视点，即观察3D视图时眼睛的位置，也就是眼睛直对屏幕的那个点在（x，y）坐标系上的坐标值。
默认为（center，center），也就是父元素的中心点。
注意：该属性应该设置在变换元素的上级素上。
transform-orgin
含义跟2D变换一样，用于指定元素变换时的“原点”（基点）；
transform
含义跟2D变换一样，只是多了一些有关3D变换的变换函数，主要有：
translateX(x), translateY(y), translateZ(z), translate3d(x, y, z)： 移动变换
rotateX(x角度), rotateY(y角度), rotateZ(z角度), rotate3d(x, y, z, deg)：旋转变换；其旋转规则为：
左手“抓住”某轴，大拇指指向该轴正方向，则正值会沿其余手指的方向旋转，否则相反；
rotate3d中，x，y，z是数值，是相对大小，deg才是角度。
scaleX(x), scaleY(y), scaleZ(z), scale3d(x, y, z)：缩放变换
8.6 过渡效果 transition
8.6.1 基本概念
过渡（transition）是指，能够让一个元素的属性，从某个值，变换到另一个值的时候，不是表现为“立即实现”（突然变化），而是表现为“逐步变化”，则视觉效果看起来就是“动画效果”了。
过渡效果在应用中通常结合鼠标的动作而展现出来，最常见的就是使用“:hover”伪类。
过渡效果的设置主要设置如下几项：
参与过渡的属性名，过渡的时长，过渡的方式，以及过渡发生前的延迟时间。
8.6.2 主要属性
transition-property：要用于实现过渡的属性名；
transition-duration：过渡时长；比如：2s；
transition-timing-function：过渡方式；常用的过渡方式如下所示：
linear：线性过渡。
ease：平滑过渡，这是默认值
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
transition-delay：过渡效果发生前的延迟时长，比如：1s。
transition：以上4属性的综合属性，并可以设定多属性过渡（比如位置和颜色同时变化)，形式如下：
transition：第1个过渡 [，第2个过渡] [，第3个过渡] [......]；
每个过渡的形式为：过渡属性名 过渡时长 [过渡方式] [延迟时长]；
8.7 动画效果 animation
8.7.1 基本概念和语法
动画效果其实可以看着过渡效果的升华版：
过渡效果是实现元素在某个（或某些）属性的两个不同值之间的状态变化效果；
动画效果是预先定义好某个（或某些）属性的多个不同值之间的状态变化效果，并对之命名，而后可多次应用在不同的元素上。
简单说就是：
过渡效果是“实现某元素的某种状态变化效果”，
动画效果是“定义某种状态变化效果，并可拿来用”。
8.7.2 主要属性
animation-name：动画名；
animation-duration：动画持续时间；
animation-timing-function：动画播放播放方式（效果），也有如下几个常用的效果名：
linear：线性过渡，就是匀速进行
ease：平滑过渡，这是默认值
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
animation-delay：动画播放前的延迟时间；
animation-iteration-count：动画播放循环次数，使用数字或infinite（无限）；
animation-direction：动画播放方向（正向还是反向），可用的值有：
normal：常规（就是从前往后播放）
reverse：反向（就是从后往前播放）
alternate：交替（就是先从前往后，再从后往前），播放次数大于1次才有意义
alternate-reverse：反向交替（就是先从后往前，再从前往后），播放次数大于1次才有意义
animation-fill-mode：动画停止（播放结束）时元素停留的状态，可用的值有：
forwards： 停留在前面（动画播放的结尾处）；
backwards： 停留在后面（动画播放的开时处）；
both： 两边都可停（动画停在哪边就哪边）；
animation-play-state：设置动画启动或暂停，有两个可用的值：
running： 运行状态（默认值），也就是运行动画效果；
paused： 暂停状态，也就是动画效果运行中停下来（此时如果需要还可以继续运行）；
animation：上述属性的综合属性，并依次按该顺序列出（不需要的项直接省略）；
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
