CSS3各个模块详解

css3各个模块详解

一， css3 盒子 阴影 属性 box- shadow 也是 css3 新增 的 一个 重要 属性， 用来 定义 元素 的 盒子 阴影。

inset： 阴影 类型， 可选 值。 如果不 设置， 其 默认 的 投影 方式 是 外 阴影; 如果 取其 唯一 值“ inset”， 就是 给 元素 设置 内 阴影。 x- offset： 阴影水平偏移量， 其值可以是正负值。 如果取正值， 则 阴影 在 元素 的 右边， 反之 取 负值， 阴影 在 元素 的 左边。 y- offset： 阴影垂直偏移量， 其值可以是正负值。 如果取正值， 则 阴影 在 元素 的 底部， 反之 取 负值， 阴影 在 元素 的 顶部。 http:/ /www.iis7.com/b/wzjk/ blur- radius： 阴影模糊半径， 可选参数。 其值只能是正值， 如果 取值 为“ 0” 时， 表示 阴影 不具 有 模糊 效果， 如果 取值 越大， 阴影 的 边缘 就 越 模糊。 spread- radius： 阴影 扩展 半径， 可选参数。 其值可以是正负值， 如果 取值 为 正值， 则 整个 阴影 都 延展 扩大， 反之 取值 为 负值， 则 整个 阴影 都 缩小。 color： 阴影 颜色， 可选 参数， 如果不设定任何颜色 时， 会取默认色， 但 各浏览器 默认色不一样， 在图片上加内阴影，先给图片添加一个容器，如：p等，

二， border-radius 圆角 圆形 border- radius 制作 圆角 有两 点 技巧。 ·元素 的 宽度 和 高度 相同。 ·圆角 的 半径 值 为 元素 宽度 或 宽度 的 一半 或者 直接 设置 圆角 半径 值 为 50%。 半圆 border- radius 制作半圆与制作圆形的方法是一样 的， 只是元素的 宽度与圆角方位要配合一致， 不同的宽度和高度比例， 以及圆角方位， 可以制作上半圆、下半圆、 左半圆 和 右半圆 效果。 扇形 border- radius 制作 扇形， 其实 就是 使用 border- radius 属性 制作 四分之一 圆形。 遵循“ 三 同， 一 不同” 原则， 其中“ 三 同” 是指 元素 的 宽度、 高度 和 圆角 半径 值 相同， 而“ 一 不同” 指的 是 圆角 位置 不同。 根据 圆角 取值 位置 不一样， 可以分 左上、 右上、 右下 和 左下 四种 扇形 效果。 椭圆 椭圆 其实 就是 一个 圆形 受到 挤压 而成 的 一种 形状， border- radius 制作 椭圆 也非 常 方便， 只 受限 于 元素 的 宽度 或 高度， 然后 就是 圆角 半径， 制作 椭圆 的 圆角 半径 和 其他 图形 有所 不一样， 需要 设置 圆角 的 水平 和 垂直 方向 的 半径 值。 椭圆 有 两种， 一种 是 水平 的， 另外 一种 是 垂直 的。 它们 之间 的 差别 只是 方向 性的 区别， 其 制作 方法 是 一样 的。 制作 水平 椭圆， 元素 宽度 是 高度 的 2 倍， 而且 border- radius 的 水平 半径 等于 元素 宽度， 垂直 半径 等于 元素 高度; 而 垂直 椭圆 刚好 与水 平 椭圆 的 参数 相反。

。。。。。。

三， css3 背景

背景主要包括五个属性：

1· background- color( 背景 颜色)

2· background- image( 背景 图片)

3· background- repeat( 背景 图片 展示 方式)

4· background- attachment( 背景 图片 是 固定 还是 滚动)

5· background- position( 背景 图片 位置)

可以单独写， 也可以将这些属性串在 一起使用。 background- color 属性，用来设置元素的背景颜色， 其默认值为“ transparent”， 不设置任何颜色情况下是透明色， background- image 属性，用来设置元素的背景图片， 默认值为“ none”，< url> 是指背景图片的地址， 这个地址可以是相对地址， 也可以是绝对地址。 background- repeat 属性，用来设置元素背景图片在元素的盒模型中的铺放格式， 其默认为“ repeat”， 也就是背景图片沿元素的x轴和y轴同时平铺，“ repeat- x”表示的是元素背景图片沿元素 的x轴平铺， y轴不进行任何铺 放;“ repeat- y” 刚好相反， 元素背景图片沿元素的y轴平铺， x轴不进行任何铺 放;“ no- repeat”和 默认值“ repeat” 相反， 表示背景图片不做任何铺 放。 background- attachment 属性，用来设置元素背景图片是否固定或者随着页面的其余部分滚动， 其默认值为“ scroll”， 表示背景图片会随着浏览器滚动条一起滚动， 而取值为“ fixed” 时， 背景图片 固定不动。 background- attachment 取值为“ fixed” 时， 一般运用在html或 body标签 上， 使用在其他标签上不能达到固定效果。 background- position 属性，用来设置元素背景图片的位置， 其默认值为( 0，0)||( 0%， 0%)||( lefttop)， 其值可以是具体的百分数或数值设置( 可以 是 负值)， 也可以使用关键词 left、 center、 top、 right、 top、 bottom 配合设置，

三，*与背景相关的新增属关于 background属性的用法相信很多读者都已经熟悉了。 在css3中， background 属性 依然保持以前的用法， 只是追加了一些与背景相关的属性。

1· background- origin： 指定绘制背景图片的起点。

2· background- clip： 指定背景图片的显示范围。

3· background- size： 指定背景图片的尺寸大小，在css3中， 可以使用background- size属性来指定背景图片的尺寸， 可以控制背景图片在水平和垂直两个方向的缩放， 也可以控制图片拉伸覆盖 背景区域的方式， 甚至还可以截取背景图片。 背景图片能够自适应元素盒子的大小， 实现与模块大小完全适应的背景图片， 避免了因区块尺寸不同而需要设计不同的背景图片。

background- size共有五种属性值，每一种属性值的作用如下：

·auto： 默认值。 将保持背景片的原始高度和宽度。

·： 取具体的整数值( 例如 px 值)， 将改变背景图片的大小。

·： 取值为百分值， 可以是 0% ～ 100%。 此时， 同样改变背景图片的大小， 但 此值是相对于元素的宽度来进行计算， 并不是根据背景图片的宽度来进行计算。

·cover： 将背景图片放大， 以适合铺满整个容器。 但这种方法会致使背景图片失真。

·contain： 保持背景图像本身的宽和高比例， 将背景图像缩放到宽度或高度正好适应所定义背景容器的区域。 当 background- size 取值为固定数值( length) 和百分比值( percentage) 时可以 设置两个值， 也可以设置一个值。 只取一个值时， 指定了背景图片的宽度， 第二个值相当于auto， 也就是指定了高度。 在这种情况下， auto值设定 之后能够让背景图片的高度自动地按照比例缩放。

4· background- break： 指定内联元素的背景图片进行平铺时的循环方式。

。。。。。。

四， css3 文本

在 web 页面或者web应用程序中设置文本样式是css最基本的要求， 早期的css文本功能就是给web页面设置文本的 字体、 字号、 颜色、 样式、 粗细、 间距 等。 随着 css3 的 出现， 文本 功能 不仅仅 局限于 这些 基本 的 运用， 它 给 文本 功能 添加 了 一些 高级的 属性 设置， 如 文本 阴影 属性 text- shadow、 文本 自动 换行 属性 word- break、 长 单词 与 url 地址 自动 换行 属性 word- wrap 和 文本 溢出 属性 text- overflow 等，

在 css文本功能上主要分为三大类： 字体、 颜色 和 文本，

text- shadow 属性 一共 包含 4 个 属性 参数， 每个 属性 参数 都 具有 自己的 作用。

·color： 阴影 颜色， 定义绘制阴影时所使用的颜色， 这个参数可以放在第一 也可以放在最后， 是一 个可选参数， 如果没有显式设置阴影颜色， 会使用文本的颜色作为阴影颜色。 阴影颜色可以是颜色 关键词、 十六进制 颜色、 rgb 颜色、 rgba 透明 色 等。

·x- offset： x 轴 位移， 用来 指定 阴影 水平 位移 量， 其 值 可以 是 正 负值， 如果 为 正值， 阴影 在 对象 的 右边， 反之 阴影 在 对象 的 左边。

·y- offset： y 轴 位移， 用来 指定 阴影 垂直 方向 偏移量， 其 值 可以 是 正 负值， 如果 为 正值， 阴影 在 对象 的 底部， 反之 阴影 在 对象 的 顶部。

·blur- radius： 阴影 模糊 半径， 可选 参数， 用来 设置 阴影 的 模糊 半径， 代表 阴影 向外 模糊 的 模糊 范围。 这个 值 越大， 阴影 向外 模糊 的 范围 越大， 阴影 的 边缘 就 越 模糊。 不过 这个 值 只能 是 正值， 其 值 为 0 时， 表示阴影 不具 有 模糊 效果。

可以 使用 text- shadow 属性来给文本指定多个阴影， 并且针对每个阴影使用不同颜色。 指定多个阴影时使用逗号将多个阴影进行分隔。 text- shadow 多阴影效果按照给定的顺序应用， 因此前面的 阴影有可能会覆盖后面的， 但是它们永远会覆盖文本本身。 css3 溢出文本属性平时在网页制作中一定碰到过内容溢出的问题， 如文章列表标题很长， 而其宽度又受到限制， 此时超出宽度的内容就会以省略 标记(…) 显示。 以前实现这样的效果都是由后台 程序截取一定的字符数在前台输出， 另外一种方法就是使用 javascript 截取 一定 的 字符 数 实现。 可是 这 两种 方法 都有 其 不足之处， 如 中文 和 英文 的 计算 字符 宽度 的 问题， 这个 值 不好 计算， 所以 造成 截取 字符 数 不好 控制， 从而其通用性也差。 css3 新增 了 text- overflow 属性， 使得 这个 问题 迎刃而解。

text- overflow 属性 参数 比较 简单， 只有两个属性值。

·clip： 不显 示 省略 标记(…)， 只是 简单 的 裁 切。

·ellipsis： 文本 溢出 时 显示 省略 标记(…)， 省略 标记 插入 的 位置 是最 后 一个 字符。

强制 文本 在 一行 显示( white- space: nowrap) 和 溢出 内容 隐藏( overflow: hidden)， 并且 需要 定义 容器 的 宽度。

text-overflow: ellipsis; overflow: hidden; 有省略号，需要这两个属性配合才有效，

text-overflow: clip; overflow: hidden; 直接隐藏，需要这两个属性配合才有效， css3 文本 换行

在 css3 中， 使用 word- wrap：break- word属性 实现 长 单词 与 url 地址 的 自动 换行。

·break- all： 可以 强行 截断 英文 单词， 达到 词 内 换行 效果。

·keep- all： 不允许字断开。 如果是中文把前后标点符号内的一个汉字短语整个换行， 英文单词整个换行; 如果出现某个英文字符长度超过容器边界， 后面的部分将撑破容器; 如果边框为固定属性， 则后面部分无法显示。

white- space 属性主要用来声明建立布局过程中如何处理元素中的空白符。

white- space 属性 取值 简单 说明 如下：

·normal： 默认值。 空白处会被浏览器忽略。 可以通过这个值恢复到属性的默认值。

·pre： 文本空白处会被浏览器扣留， 其行为方式类似于 html 中的< pre> 标签 效果。

·nowrap： 文本不会换行， 文本会在同一行上， 直到碰到换行标签< br />为止。

·pre- line： 合并空白符序列， 但保留换行符， 此属性不支持 ie 7. 0-、 firefox 3. 0- 和 opera 9. 2- 以下版本浏览器。

·pre- wrap： 保留空白符序列， 但是正常进行换行， 此属性值不支持 ie 7. 0 和 firefox 3. 0 以下 版本浏览器。

·inherit： 继承父元素的 white- space 属性值， 此属性值在所有的 ie浏览器都不支持。

。。。。。。

五，　 css3 颜色特性 “佛 靠 金 装， 人 靠 衣装”， 网页也是如此。 随着互联网的 迅速发展， 一个网页给人们留下的第一印象， 既不是它的内容， 也不是它的设计， 而是整体颜色。 为了能够达到 人们的需求， web设计师除了需要掌握网站制作的技术之外， 还必须能够很好地应用 web 颜色。 换句话说， 网站颜色的使用好坏， 直接影响网站的生存力。

网页色彩的表现原理

我们知道有256种web安全颜色， 其实这256种颜色 是指8位颜色的表现能力， 随着科技的发展， 现在颜色不局限于8位， 16位色彩的总数是65536 色， 也就是2的16次方， 而新增了24位元色彩， 也就是2的24次方， 即16777216种颜色。 32位色就是2的32次方的发色数， 即16777216种颜色， 不过它增加了256阶颜色的灰度。 32位色和16位色肉眼分辨不出来吗? 如果用两台品牌型号都一样 的显示器， 分别调不同的颜色， 就能看出区别。 而在web页面的设计中， 颜色主要运用16 进制数值的表示方法， 为了用html表现rgb颜色， 使用十六进制数 0 ～ 255， 改为十六进制就是 00 ～ ff， 用rgb的顺序罗列就成为html颜色编码。 例如， 在 html 编码中“ 000000” 就是指红色( r)、 绿色( g) 和蓝色( b) 都没有， 就是0状态， 也就是黑色。 相反“ ffffff” 就是就是 红色( r)、 绿色( g) 和蓝色( b)都是 255， 也就是白色。 显示器是由 一个个像素构成， 利用电子束来表现色彩。 像素把光的三原色： 红色( r)、 绿色( g)、 蓝色( b) 组合成的色彩 按照科学原理表现出来。 一 像素包含 8 位元色彩的信息量， 有 从 0 ～ 255 的256个单元， 其中 0 是 完全 无光 状态， 255 是最 亮 状态。 rgb色彩模式，rgb色彩模式是光的三原色 红、 绿、 蓝 混合产生的。 web页面中使用的图片在大多数是在rgb色彩模式中制作的。 rgb色彩是颜色相加混合产生的， 这样的混合称为 加色混合。 加色混合中， 补色是指相关的两个颜色混合时， 成为白色的情况。 cmyk色彩模式，cmyk色彩模式是指颜料的三原色 青色、 洋红、 黄色 加上 黑色， 这四种颜色减色混合表现出的色彩是主要用于出版印刷时制作图像的一种模式。 减色混合是指是指颜色混合后出现 的色彩比原来的颜色暗淡， 这样与补色相关的两种颜色混合就会出现彩色的情况。 索引色彩模式，索引色彩模式是已经被限定在256种颜色以内的模式， 主要用于web页面安全色彩和制作透明 gif 图片。 在 photoshop 中制作透明gif图片时， 一定要使用索引色彩模式。 灰度模式，灰度模式是无色彩模式， 在制作黑白图片时使用， 主要用于处理 黑、白、灰色 图片。 双色调模式，双色调模式是在黑白图片中加入颜色， 使色调更加丰富的模式。 rgb、 cmyk 等颜色模式都不可以直接转换为双色调模式， 必须将色彩模式先转换为灰度模式后， 才能够转换为双色调 模式。 用双色调模式可以用很小的空间制作出漂亮的图片。 位图模式，位图模式是 用白色和黑色共同处理图片的模式。 与双色调一样， 除双色调模式和灰度模式外， 其他色彩模式都需要转换为灰度模式后， 再转换为位图模式。 位图模式可以选定5种图片 处理 方法：

1) 50% 阈值， 是在 256 种 颜色 中， 当 颜色 值 大于 129 就 处理 为 白色， 反之则处理为黑色。

2) 图案仿色， 是按一定的模式处理图片。

3) 扩散仿色为最常用的选项， 是按黑色和白色的阴影使其分布。

4) 半调网屏与自定图案， 是利用盲点的各种形态和密度与用户自己设置样式的处理方式。

css3 颜色模式在 css2. 的基础 css3上 新增了 rgba、 hsl 和 hsla， rgba 在 rgb 基础上 增加 了控制 alpha 透明度的参数， 其中 rgb 颜色 模式( 也称 为 三原色) 是工业界 的 一种 颜色标准， 通过对 红( r)、 绿( g)、 蓝( b) 三个 颜色 通道 的 变化 以及 它们 相互 之间 的 叠加 得到 各种 颜色，rgb几乎包括人类视力所能感知的所有颜色， 是目前运用最广的颜色之一。 而rgba 仅在 rgb 的 基础上 增加 了 alpha 通道， 用来 设置 颜色 的 透明度。

rgba 的 属性 参数 很 简单， 分别 代表 红绿 蓝 以及 透明度 的 值。

·r： 红色 值， 其 取值 可以 是 正 整数 或者 百 分值。

·g： 绿色 值， 其 取值 可以 是 正 整数 或者 百 分值。

·b： 蓝色 值， 其 取值 可以 是 正 整数 或者 百 分值。

·a： alpha 透明 值， 其 取值 在 0 ～ 1 范围 之间。

这几个参数值都不可以取负值。 hsl 颜色 模式 hsl 和 rgb 一样， 同 属于 工业界 的 一种 颜色 标准， 通过 对 色调( h)、 饱和度( s)、 亮度( l) 三个 颜色 通道 的 变化 以及 它们 相互 之间 的 叠加 得到 各式各样 的 颜色 的。 hsl 标准 几乎 包括 人类 视力 所能 感知 的 所有 颜色， 是 目前 运用 最 广 的 颜色 系统 之一。 使用 hsl 模型 为 图像 中 每一个 像素 的 hsl 分量 分配 一个 0 ～ 255 范围内 的 强度 值。 hsl 图像 只用 三种 通道 按照 不同 的 比例 混合， 在 屏幕 上 呈现 16777216 种 颜色。 前面 也 说过， 色调( h) 是在 色 盘 上 的 颜色( 如图 6- 4 所示)， 颜色 的 选择 是 使用 饱和度( s)， 0 度 是 红色， 120 度 为 绿色， 240 度 为 蓝色。 同时 可以 使用 不同 的 亮度( l) 来 控制 这个 颜色， 其中 0 表示 的 是一 个 灰度， 不使 用 任何 的 色彩， 而 100% 是指 在 充分 使用 一个 颜色。

·h： 色调( hue)。 取整 数值(< length>)， 可以 为 任意 整数， 其中 0( 或 360 或- 360) 表示 红色， 60 表示 黄色， 120 表示 绿色， 180 表示 青色， 240 表示 蓝色， 300 表示 洋红。 当 它们 的 值 大于 360 时， 实际 的 值 等于 该 值 除 360 之后 的 余数。 例如， 如果 色调 的 值 是 480， 则 实际 的 颜色 值 为 480 除以 360 之后 得到 的 余数 120。

·s： 饱和度( saturation)。就是颜色的深浅度和鲜艳程序， 取百分数(< percentage>)， 可以取值 0 ～ 100%之间的任意值， 其中0表示灰度( 没有 该 颜色)， 100%表示饱和度最高( 该 颜色 最 鲜艳)。

·l： 亮度( lightness)。 取值和饱和度( s) 一样， 可以 取值 0 ～ 100% 之间的任意值， 其中0最暗( 黑色)， 100% 最亮( 白色)。 hsla 颜色模式 hsla 是 hsl 的 扩展 模式， 在 hsl 的 基础上 增加 一个 透明 通道 alpha 来 设置 不透明 参数。

。。。。。。

六， css3盒模型 css 有 一种基础设计模式叫盒模型， 定义了web页面中的元素是如何看做盒子来解析的。 每一个盒子有不同的展示界面，

在 css 中 主要有以下几种盒模型： inline、 inline- block、 block、 table、 absolute position、 float。 浏览器把每个元素看 一个盒模型， 每一个盒模型是由以下几个 属性 组合 所 决定 的： display、 position、 float、 width、 height、 margin、 padding 和 border 等， 不同 类型 的 盒 模型 会 产生 不同 的 布局。

什么是盒模型css 中 每一个 元素 都是 一个 盒 模型， 包括 html 和 body 标签 元素。 在平时设计中， 大家对 content、 padding、 margin、 background 和 border 来说一定不会陌生了， 因为 盒模型都具备这些属性。 其中 width、 height、 border、 background、 padding 和 margin 之间的层次关系和相互影响，

可以 看出 padding、 content、 background- image、 background- color， 它们 四 者 构成 了 z 轴( 垂直 屏幕 的 坐标) 多重 层叠 关系。 但是 border 与 margin、 padding 三 者 之间 应该 是 平 面上 的 并 级 关系， 并不能 构成 z 轴 的 层叠 关系。

在 css 中 盒 模型 被 分为 两种，

第 一种 是 w3c 的 标准 模型，

另一种 是 ie 的 传统 模型，

它们 相同之处 都是 对 元素 计算尺 寸 的 模型， 具体 说 就是 对 元素 的 width、 height、 padding 和 border 以及 元素 实际 尺寸 的 计算 关系， 不同 之处 是 两者 的 计算 方法 不一致。

1) w3c 的 标准 盒 模型。 外 盒尺 寸 计算( 元素 空间 尺寸) element 空间 高度 = 内容 高度 + 内 距 + 边框 + 外 距 element 空间 宽度 = 内容 宽度 + 内 距 + 边框 + 外 距 内 盒尺 寸 计算( 元素 大小) element 高度 = 内容 高度 + 内 距 + 边框 (height 为 内容 高度) element 宽度 = 内容 宽度 + 内 距 + 边框 (width 为 内容 宽度)

2) ie 传统 下 盒 模型( ie 6 以下， 不 包含 ie 6 版本 或 quirksmode 下 ie 5. 5+)。 外 盒尺 寸 计算( 元素 空间 尺寸) element 空间 高度= 内容 高度 + 外 距 (height 包含 了 元素 内容 宽度、 边框、 内 距) element 宽 间 宽度 = 内容 宽度 + 外 距 (width 包含 了 元素 内容 宽度、 边框、 内 距) 内 盒尺 寸 计算( 元素 大小) element 高度 = 内容 高度( height 包含 了 元素 内容 宽度、 边框、 内 距) element 宽度 = 内容 宽度( width 包含 了 元素 内容 宽度、 边框、 内 距)

为了 解决 这种 问题， css3 增添 了 一个 盒 模型 属性 box- sizing， 能够 事先 定义 盒 模型 的 尺寸 解析 方式，

box- sizing 的 属性 值 主要 有 以下 三个：

1· content- box： 默认值， 让 元素 维持 w3c 的 标准 盒 模型。 元素 的 宽度 和 高度( width/ height) 等于 元素 边框 宽度( border) 加上 元素 内 距( padding) 加上 元素 内容 宽度 或 高度( content width/ height)， 也就是 element width/ height= border+ padding+ content width/ height。

2· border- box： 此 值 会 重新 定义 css2. 1 中 盒 模型 组成 的 模式， 让 元素 维持 ie 传统 的 盒 模型( ie 6 以下 版本 和 ie6 ～ 7 怪异 模式)。 元素 的 宽度 或 高度 等于 元素 内容 的 宽度 或 高度。 从 盒 模型 介绍 可知， 这里 的 内容 宽度 或 高度 包含 了 元素 的 border、 padding、 内容 的 宽度 或 高度( 此处 的 内容 宽度 或 高度 = 盒子 的 宽度 或 高度- 边框- 内 距)。

3· inherit：此 值 使 元素 继承 父 元素 的 盒 模型 模式。 box- sizing 属性 主要 用来 控制 元素 的 盒 模型 的 解析 模式， 其 主要 目的 是 控制 元素 的 总 宽度。 在 w3c 规范 中， 元素 的 box- sizing 默认 属性 值 是 content- box 值， 如果不 显 式 重置 box- sizing 属性 值 为 border- box， 才能 明确 对 元素 设置 一个 总 宽度。 在这 种 情况 之下 会使 页面 布局 更加 方便。

。。。。。。

七，　 css3内容溢出属性在css中的每一个元素都视为一个盒子， 这个盒子就是一个容器。 容器就有大小之分， 如果在样式中指定盒子的宽度与高度， 可能某些内容在盒子中就会容不下， 此时 就可以 使用 overflow 属性 来 指定 如何 显示 盒中 容纳 不下 的 内容。 overflow 属性 是 css2. 1 规范 中的 特性， 而在 css3 中 增加 了 overflow- x 和 overflow- y 属性。

overflow- x主要是用来定义对水平方向内容溢出的剪切， 而 overflow- y主要用来定义对垂直方向内容溢出的剪切。

和 overflow属性参数一样， overflow- x和overflow- y属性值取不同的值所起的作用 不一样。

·visible： 默认值。 表示不剪切容器中的任何内容、 不添加滚动条， 元素将被剪切为包含对象的窗口大小， 而且clip属性设置将失效。

·auto： 在需要时剪切内容并添加滚动条。 也就是说也就是说当内容超过容器的宽度或者高度时， 溢出的内容将会隐藏在容器中， 并且会添加滚动条， 用户可以拖动滚动条查看隐藏在容器中的内容。

·hidden： 内容溢出容器时， 所有内容都将隐藏， 而且不显示滚动条。

·scroll： 不管内容有没有溢出容器， overflow- x 都会显示横向的滚动条， 而overflow- y 会显示纵向的滚动条。

·no- display： 当内容溢出容器时不显示元素， 此时类似于元素添加了 display: none 声明 一样。

·no- content： 当内容溢出容器时不显示内容， 此时类似于添加了 visibility: hidden 声明 一样。

。。。。。。

八，　 css3 *缩放属性为了增强用户体验， css3增加了很多新的属性， 其中 resize 就是 一个重要的属性， 也是一个非常实用的属性， 它允许用户通过拖动的方式来修改元素的尺寸来改变元素的 大小。 到目前为止， 可以使用 overflow属性的任何容器元素。 在此之前， web设计师为了要实现这样的ui 效果， 需要使用大量的脚本代码才能实现， 这样费时费力， 效率极低。

resize 属性主要是用来改变元素尺寸大小的， 其主要目的是增强用户体验。 使用方法极其的简单。

在 css3 中 resize 属性 指 定的 值 分为 以下 几种：

·none： 用户不能拖动元素修改尺寸大小。

·both： 用户可以拖动元素， 同时修改元素的宽度和高度。

·horizontal： 用户可以拖动元素， 仅可以修改元素的宽度， 但不能修改元素的高度。

·vertical： 用户可以拖动元素， 仅可以修改元素的高度， 但不能修改元素的宽度。

·inherit： 继承父元素的 resize 属性值。

。。。。。。

九，css3 外轮廓属性外轮廓 outline 在页面中呈现的效果和边框border呈现的效果极其相似， 但和元素边框 border完全不同， 外轮廓线不占用网页布局空间， 不一定是矩形， 外轮廓是属于一种 动态样式， 只有元素获取到焦点或者被激活时呈现。

·outline- color： 定义轮廓线的颜色， 属性值为css 中定义的颜色值。 在实际应用中， 省略时此参数的默认值为黑色。

·outline- style： 定义 轮廓线的样式， 属性为css中定义线的样式。 在实际应用中， 省略时此参数的默认值为 none， 省略后不对该轮廓线进行任何绘制。

·outline- width： 定义轮廓线的宽度， 属性值可以为 一个宽度值。 在实际应用中， 省略时此参数的默认值为 medium， 表示绘制中等宽度的轮廓线。

·outline- offset： 定义轮廓边框的偏移位置的数值， 此值可以取负数值。 当此参数的值为正数值， 表示轮廓边框向外偏离多少个像素; 当此参数的值为负数值， 表示轮廓边框向内偏移多少个像素。

·inherit： 元素继承父元素的 outline效果。

轮廓和边框的对比

outline 和 border 的 对比 outline 属性 创建 的 外轮 廓 线外 表上 和 border 极其 相似， 但 实际 上有 明显 的 不同。

·border 属于 盒 模型 的 一部分， 直接影响 元素 盒子 的 大小， 而 outline 创建 的 外 轮廓 线 是 画 在 一个 框 的“ 上面”， 不会 影响 该 框 或 任何 其他 框 大小， 因此 outline 创建 的 轮廓 线 不会 影响 文档 流， 也不 会破 坏 网页 布局。

·outline 创建的轮廓线表面上和border 一样， 可以创建轮廓线的颜色、 线型样式、 线型粗细大小， 但 和 border 有 一点 完全 不一样。 outline 创建 的 外 轮廓 线 在 元素 各 边 都 一样， 这 和 border 不一样， 不能 像 border 边框 一样， 设置 outline- top 或 outline- left 之类。

·border 创建 的 元素 边框 可以 单边 设置， 而 outline 创建 的 外 轮廓 线 始终 是 闭合 的。

·outline 创建 的 外 轮廓 线 可能 是非 矩形 的， 如果 元素 是 多 行， 外 轮廓 线 就 至少 是 能够 包含 该 元素 所有 框 的 外 轮廓。 可 border 不一样， 他将 使用 一个 边框 包括 整个 元素。

·border 仅可以设置元素的边框， 只能向外扩展， 而outline创建的外轮廓线， 可以通过 outline- offset 的值， 向元素外部( outline- offset 值 为 正值) 或向元素内部( outline- offset 值 为 负值) 创建封闭的轮廓。

。。。。。。

十，　 css3伸缩布局盒模型

早期的布局主要依赖于表格， 从 css2. 1中有关于布局的机制有所改变， 但还是并不多。 开发者通常不愿意使用绝对定位， 因为太不灵活; 浮动 定位 常用于页面的 布局， 但 对于全页多列布局来说， 它总是存在一些小毛病， 功能上也有很多限制。 css3 中引入了许多的布局机制， 使构建一个多列布局变得更加轻松， 同时， css2. 1 规则是比较难实现的一些 复杂布局表现， 如今也变得更加容易。 弹性盒模型 　flexbox模型基础知识css3 引入 一种新的布局模式—— flexbox 布局， 即伸缩布局盒( flexible box)模型， 用来提供 一个更加有效的方式制定、 调整和分布一个容器里的项目布局， 即使它们的大小是未知或者动态的， 这里简称 flex。

css 中的布局模式

谈到布局， css2. 1 中 定义 了四种布局模式，由一个盒与其 弟、 祖先盒的关系决定其尺寸与位置的算法。

·块布局： 呈现文档的布局模式。

·行内布局： 呈现文本的布局模式。

·表格布局： 用格子呈现2d数据的布局模式。

·定位布局： 能够直接地定位元素的布局模式， 定位元素基本与其他元素没有任何关系。

css3 引入的布局模式 flexbox 布局， 主要思想是让容器有能力让其子项目能够改变其宽度、 高度( 甚至 顺序)， 以最佳方式填充可用空间( 主要是为了适应所有类型的显示设备和屏幕大小)。 flex容器会使子项目( 伸缩 项目)扩展来填满可用空间， 或缩小它们以防止溢出容器。

最重要的是， flexbox布局方向不可预知， 不像常规的布局( 块就是从上到下， 内联就 从左到右)， 而那些常规的适合页面布局， 但对于支持大型或者复杂的应用程序( 特别是涉及取向改变、缩放 和收缩等) 就缺乏灵活性。

：flexbox 模型的功能

flexbox 布局对于设计比较复杂的页面非常有用。 可以轻松地实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变。 同时减少了依赖于 浮动 布局 实现 元素 位置 的 定义 以及 重置 元素的大小。 flexbox 布局在定义伸缩项目大小时 伸缩容器会预留一些可用空间， 可以调节伸缩项目的相对大小和位置。 例如， 可以确保伸缩容器中的多余空间平均分配多个伸缩项目。 当然， 如果 伸缩容器没有足够大的空间放置伸缩项目时， 浏览器会根据 一定的比例减少伸缩项目的大小， 使其不溢出伸缩容器。 综合而言， flexbox 布局功能主要具有以下几点：

1· 屏幕和浏览器窗口大小发生改变也可以灵活调整布局。

2· 指定伸缩项目沿着主轴或侧轴按比例分配额外空间( 伸缩 容器 额外 空间)， 从而调整伸缩项目的大小。

3· 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间， 分配到伸缩项目之前、 之后或之间。

4· 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围。

5· 控制元素在页面上的布局方向。

6· 按照不同于文档对象模型( dom) 所指定排序方式对屏幕上的元素重新排序。 也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

：flexbox 模型 中的术语

flexbox 模型中的术语和 css3 其他 属性不一样， flexbox 并不是一个属性， 而是一个模块， 包括多个 css3属性， 涉及很多东西， 包括整个组属性。 虽然现在对flexbox有 一定的了解， 如果想 更好地使用 flexbox， 新的术语和概念可能是一个障碍， 所以首先了解基本概念。

主轴和侧轴在 flexbox 模型中与布局计算偏向使用书写模式方向的块布局与行内布局不同， 伸缩 布局 偏向 使用 伸缩 流的 方向。一个 row伸缩容器中各种方向与大小术语

·主轴、主轴方向： 用户代理沿着一个伸缩容的主轴配置伸缩项目， 主轴是主轴方向的延伸。 伸缩容器的主轴， 伸缩项目主要沿着这条轴进行布局。 小心， 它不一定是水平的， 这主要取决于 justify- content 属性。 如果 其 取值 为 column， 主轴的方向为纵向的。

·主轴起点、主轴终点： 伸缩项目的配置从容器的主轴起点边开始， 往主轴终点边结束。 也就是说， 伸缩项目放置在伸缩容器内从主轴起点( main- start) 向主轴终点( main- end)方向。

·主轴长度、主轴长度属性： 伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度， 伸缩项目的主轴长度属性是 width 或 height 属性， 由哪一个对着主轴方向决定。

·侧轴、侧轴方向： 与主轴垂直的轴称做侧轴， 侧轴是侧轴方向的延伸。 主要取决于主轴方向。

·侧轴起点、侧轴终点： 填满项目的伸缩行的配置配置从容器的侧轴起点边开始， 往侧轴终点边结束。

·侧轴长度、 侧轴长度属性： 伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度， 伸缩项目的侧轴长度属性是 width 或 height 属性， 由 一个 对着 侧 轴 方向 决定。

31. 伸缩容器和伸缩项目通过 display 属性显式地给 一个元素 设置为 flex或者inline- flex， 这个容器就是一个伸缩容器。 伸缩容器会为其内容创立新的伸缩 格式化上下文， 其中设置为 flex 的容器 被 渲染为 一个块级元素， 而设置 为inline- flex 的容器则渲染 为 一个行内元素。 若 元素 display 的 指定 值 是 inline- flex 且元素 是一 个浮动或绝对定位元素， 则 display 的计算值是flex。 一个伸缩容器的内容具有零个以上的伸缩项目—— 伸缩容器的每个子元素( 除了 需要 盒 修复 的 元素 之外) 都会成为 一个伸缩项目， 且用户代理会将任何直接在伸缩容器里的连续文字块包起来 成为 匿名伸缩项目。

32. 伸缩容器的属性flexbox伸缩布局中伸缩容器和伸缩项目是伸缩布局模块中的重要部分， 其中每一部分都具有各自的属性。 伸缩容器的属性包括以下几个：

1) 伸缩流方向。 是指伸缩容器的主轴方向， 其决定了伸缩项目放置在伸缩容器的方向。 伸缩流方向主要通过flex- direction属性来设置， 其默认值为row。 伸缩流方向和书写模式有关系， 换句话说， 伸缩项目根据书写模式的方向布局。

2) 伸缩行换行。 伸缩项目在伸缩容器中有时候也会溢出伸缩容器。 与传统的盒模型一样， css允许使用overflow属性来处理溢出内容的显示方式。 在伸缩容器中有一个伸缩换行属性， 主要用来 设置伸缩容器的伸缩项目是单行显示还是多行显示， 以及决定侧轴的方向。 使用此属性来启用溢出的伸缩容器的伸缩项目自动换行到下一行以及控制流动方向。 在伸缩容器属性中， 主要通过 flex- wrap 属性来设置伸缩项目是否换行， 默认值为 nowrap。

3) 伸缩方向与换行。 是 伸缩 流 方向 与 伸缩 换行 的 结 合物， 换句话说， 伸缩 方向 与 换行 属性 flex- flow 同时 设定 了 伸缩 流 方向 flex- direction 和 伸缩 换行 flex- wrap 两个 属性， 简而言之 是 这 两个 属性 的 缩写， 这 两个 属性 决定了 伸缩 容器 的 主轴 与 侧 轴。

4) 主轴对齐。 用来设置伸缩容器当前行伸缩项目在主轴方向的对齐方式， 指定 如何 在 伸缩 项目 之间 分布 伸缩 容器 额外 空间。 当 一 行上 的 所 伸缩 项目 不能 伸缩 或 可伸缩 但 已达 到 最大 长度 时， 这一 属性 才会 对 伸缩 容器 额外 空间 进行 分配。 当 伸缩 项目 溢出 某 一行 时， 这一 属性 也会 在 项目 的 对齐 上 施加 一些 控制。

5) 侧轴对齐。 伸缩 项目 可以 在 伸缩 容器 当前 行的 侧 轴上 进行 对齐， 这类 似于 主轴 对齐 方式， 只是 另一个 方向。 也就是说 侧 轴 对齐 主要 用来 指定 伸缩 项目 在 伸缩 容器 中 如何 放置 和 对齐 的 方式。 换句话说， 用来 定义 伸缩 项目 在 伸缩 容器 的 当前 行的 侧 轴上 对齐 方式。

6) 堆栈伸缩行。 用来 定义 伸缩 容器 中 伸缩 项目 行在 侧 轴 的 对齐 方式， 类似于 侧 轴 对齐， 只不过 这是 用来 控制 伸缩 项目 行在 布局 轴 的 堆放 方式。

33. 伸缩项目的属性一个伸缩项目是一 个伸缩容器的子元素。 伸缩容器中的文本也被视为一个 伸缩项目。 伸缩 项目 中 内容 与 普通 流 一样。 比如说， 当 一个 伸缩 项目 被 设置 为 浮动， 依然 可以 在这 个 伸缩 项目 中 放置 一个 浮动 元素。 伸缩 项目 都有 一个 主轴 长度 和 一个 侧 轴 长度。 主轴 长度 是 伸缩 项目 在 主 轴上 的 尺寸， 侧 轴 长度 是 伸缩 项目 在 侧 轴上 的 尺寸。 或者说，一个 伸缩 项目 的 宽度 或 高 取决于 伸缩 容器 的 轴， 可能 就是 它的 主轴 长度 或侧 轴 长度。 下面 的 几个 属性 可以 调整 伸缩 项目 的 行为：

1) 显示顺序。 伸缩 容器 中的 伸缩 项目 默认 显示 顺序 是 遵循 文档 在 源 码 中的 出现 的 先后 顺序( html 文档 的 dom 结构 中的 先后 顺序)。 可以 通过 伸缩 项目 的 显示 顺序 修改 伸缩 项目 在 页面 中 显示 顺序， 也可以 通过 这个 属性 对 伸缩 项目 进行 排序 组合。

2) 侧轴对齐。 包括 两种， 一种 是 align- items 属性， 可以 用来 设置 伸缩 容器 中 包括 匿名 伸缩 项目 的 所有 项目 的 对齐 方式; 另一种 是 align- self 属性， 主要 用来 在 单独 的 伸缩 项 目上 覆 写 默认 的 对齐 方式。 对于 匿名 伸缩 项目， align- self 的 值 永远 与其 关联 的 伸缩 容器 的 align- items 的 值 相同。

3) 伸缩性。 定义 伸缩 项目 可改变 它们 的 宽度 或 高度 填补 可用 的 空间。 可以 将 伸缩 容器 的 额外 空间 分 发给 其 伸缩 项目( 与 伸缩 项 目的 正 弹性 成正比) 或将 它们 缩小 以防 止 伸缩 项目 溢出( 与 伸缩 项 目的 负 弹性 成正比)。

34. 伸缩行伸缩项目 沿着 伸缩 容器 内 的 一个 伸缩 行 定位。 伸缩 容器 可以 是 单行 的， 也可以 是 多 行的。 其 主 要由 flex- warp 属性 决定。 单行 的 伸缩 容器 会 将其 所有 子 元素 在 单独 的 一行 上进 行 布局， 这种 情况 之下 有可能 导致 内容 溢出 伸缩 容器; 多 行的 伸缩 窗口 会 将其 伸缩 项目 配置 在 多个 伸缩 行上， 这类 似于 文本 的 排列。 当 文本 过宽 导致 一行 无法 容纳 时， 内容 会 断开 并 移至 新的 一行。 当 用户 代理 创建 新的 伸缩 行 时， 这些 伸缩 行会 根据 flex- wrap 属性 沿着 侧 轴 进行 堆叠。 除非 伸缩 容器 本身 是 空的， 每一个 伸缩 行 至少 包含 一个 伸缩 项目。

：flexbox 模型规范状态

flexbox布局的语法规范经过几年发生了很大的变化，也给 flexbox 的使用带来一定的局限性， 因为语法规范版本众多， 浏览器支持不一致， 致使 flexbox 布局使用不多。 flexbox 语法规范主要经历 了以下阶段。

1) 2009 年 07 月 工作 草案( display: box)

2) 2011 年 03 月 工作 草案( display: flexbox)

3) 2011 年 11 月 工作 草案( display: flexbox)

4) 2012 年 03 月 工作 草案( display: flexbox)

5) 2012 年 06 月 工作 草案( display: flex)

6) 2012 年 09 月 候选 推荐( display: flex)

把 flexbox 布局 语法 规范 主要 分成 三种。

·旧版本( old)，2009年版本， 使用 display: box 或者display: inline- box。

·混合版本( hybrid)，2011年版本，使用display: flexbox 或者display: inline- flexbox。

·最新版本( modern)，使用display: flex或者display: inline- flex。

：如何辨别旧flexbox和新flexbox

·看到“ display: box”或者“ box-{}” 属性， 说明 是 2009 年 版本 的 flexbox。

·看到“ display: flexbox” 或者“ flex()”函数， 说明 是 2011 年 版本， 也称 为 flexbox 混合 版本。

·看到“ display: flex” 或者“ flex-{}”属性， 说明 是 当前 规范， 也就是 w3c 标准 规范 版本 的 flexbox。

：伸缩容器设置display要改变元素的模式， 需要使用display属性， 如果在让一个元素变成伸缩容器， 也离不开display属性。

属性值主要有两种。

·box： 设置为块伸缩容器。

·inline- box： 设置为内联级伸缩容器。

：伸缩流方向 box- orient伸缩 流 方向 box- orient 属性 主要用来创建主轴， 从而定义了伸缩项目在伸缩容器中的流动布方向。 换句话说主要用来指定伸缩项目如何放置在伸缩容器的主轴上。

伸缩流方向 box- orient主要适用于伸缩容器。 伸缩流方向主要是用来确定伸缩项目在伸缩容器中的流动布局方向，该属性主要有四个属性值， 其取值说明如下：

·horizontal： 伸缩项目在伸缩容器中从左到右在一条不平线上排列显示。

·vertical： 伸缩项目在伸缩容器中从上到下在一条垂直线上排列显示。

·inline- axis： 伸缩项目沿着内联轴排列显示。

·block- axis： 伸缩项目沿着块轴排列显示。

伸缩流方向和文本书写模式也有关系， 如果书写模式是ltr， 表示排版本方向从左向右， 如果书写模式是rtl表示排版方向从右向左排列。 伸缩流的取值为 horizontal 和 inline- axis 时， 确认伸缩项目的 伸缩流方向和书写模式的方向关连性非常的强。 可以说书写模式直接影响了它们的排列方向。

。。。。。。

十一，　 css3 渐变，渐变是两种或多种颜色之间的平滑过渡。

35. css3线性渐变在线性渐变过程中， 颜色沿着一条直线过渡： 从左侧到右侧、 从右侧到左侧、 从顶部到底部、 从底部到顶部或沿任意轴。 如果使用过制作 photoshop 等软件， 对线性渐变并不会 陌生。 css3制作渐变效果， 其实和使用制作软件中的渐变工具没有什么差别。 首先指定一个渐变的方向、 起始颜色、 结束颜色。 具有这三个 数就可以制作 一个最简单、 最普通的渐变效果。 如果 制作一个复杂的多色渐变效果， 就需要在同一个渐变方向增添多个色 标。 具备这些渐变参数( 至少三个)， 各浏览器就会绘制与渐变线垂直的颜色结来填充整个容器。 浏览器渲染出来的效果就 类似于制作软件设计出来的渐变图像。

：css3线性渐变，(linear-gradient)

1：颜色从顶部向底部渐变 简单的方法直接使用“ to top”关键词， 表示第一颜色向第二颜色渐变。 实现类似于“ to top”效果还可以使用角度值“ 0deg”、“ 360deg” 和“- 360deg”。

2：颜色从底部向顶部渐变 关键词“ to bottom” 刚好 与“ to top” 相反， 从底部向顶部实现渐变效果。 也可以使用角度值“ 180deg” 和“- 180deg” 实现同等效果。

3：颜色从左向右渐变“to left”关键词实现了从左向右颜色渐变， 也可以通过角度值“ 90deg” 和“ 270deg”实现。

4：颜色从右向左渐变 “to right” 正好与“ to left” 效果相反。 实现了颜色从右向左直线渐变， 也可以使用角度值“ 90deg” 和“- 270deg”。

5：从右下角向左上角线性渐变 “to top left” 实现从右下角向左角线性渐变。

6：从左下角到右上角线性渐变 “to top right” 关键词实现左下角到右上角的线性渐变。

7：从右上角到左下角线性渐变 “to bottom left” 关键词实现了右上角向左下角直线渐变。

8：从左上角向右下角线性渐变 “to bottom right” 关键词实现了左上角向右下角直线渐变。

css3 制作 渐变 按钮

web页面或者说web程序应用中， 按钮是设计中的一个重要元素， 也是设计师非常重视的一个设计元素。 设计师借助photoshop等软件实现按钮效果， 然后通过图片的方式转用到web页面中或者 web应用程序中。 这种方法安全、 兼容性较强， 实现方法也简单， 但适应能力比较弱、 重用性、 可扩展性、 维护性差。 例如， 修改一个按钮的颜色， 必须先从制作软件中修改好， 再次切 图， 最后替换 web页面中的图片。 css3 的渐变出现后， web设计师可以摆脱photoshop的束缚， 特别是在配合css3的阴影、 圆角和@font- face等属性， 可以直接脱离制图软件， 直接使用css快速 设计各种精巧、靓丽、 细腻的按钮( 几乎可以和设计软件制作出来的效果一模一样)。 通过css3属性制作的按钮与设计软件制作的按钮相比， 有以下几大优势：

·灵活性、 可扩展性强： 可以通过css3的属性可以直接修改按钮的大小、 背景等效 果。

·可以减少http请求， 提高页面的加载性能。

·可以应用到任何的html标签元素， 如 a、 input、 button、 span 和 p 等。 ·可以支持按钮多种状态效果， 比如当前状态、 悬停状态和点击状态。

·完全兼容不支持 css3 的浏览器， 如果不兼容css3， 则显示没有渐变和阴影的普通效果。

：css3径向渐变，(radial-gradient)

css3径向渐变是圆形或椭圆形渐变。 颜色不再沿着一条直线轴变化， 而是从一个起点朝所有方向混合。 但相对线 渐变要比径向渐变复杂得多。

css3 径向渐变的属性参数

css3的径向渐变相对于线性渐变要复杂得多， 属性参数也繁多复杂。 css3径向变中新旧语法中的属性参数定义如下:

1.< position>主要用来定义径向渐变的圆心位置。 此值类似于css中background- position属性， 用于确定元素渐变的中心位置。 如果这个参数省略了， 其默认值为 center。 其值主要有以下几种： ·： 用长度值指定径向渐变圆心的横坐标或纵坐标， 可以为负值。

·： 用百分比指定径向渐变圆心的横坐标或纵坐标， 可以为负值。

·center： 设置中间为径向渐变圆心的横坐标值或纵坐标。

·top： 设置顶部为径向渐变圆心的纵标值。

·right： 设置右边为径向渐变圆心的横坐标值。

·bottom： 设置底部为径向渐变圆心的纵标值。

·left： 设置左边为径向渐圆心的横坐标值。

2.< shape> 主要用来定义径向渐变的形状。 其主要包括两个值circle 和ellipse：

·circle： 如果< size> 和< length> 大小相等， 径向渐变是一 个圆形， 也就是用来指定圆形的径向渐变。

·ellipse： 如果< size> 和< length> 大小不相等， 径向渐变是一个椭圆形， 也就是用来指定椭圆形的径向渐变。

3.< size>用来确定径向渐变的结束形状大小。 如果省略， 其默认值为 farthest- corner。 可以给其显式地设置一些关键词。

·closest- side： 指定径向渐变的半径长度为从圆心到离圆心最近的边。

·closest- corner： 指定径向渐变的半径长度为从圆心到圆心 最近的角。

·farthest- side： 指定径向渐变的半径长度为从圆心到离圆心最远的边。

·farthest- corner： 指定径向渐变的半径长度为从圆心到离圆心最远的角。 如果< shape>设置 为circle或者省略，< size> 可能显式设置为< length>。 表示用长度值指定径向渐变的横向或纵向直径 长度， 并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆， 不能为负值。

4.< color- stop> 径向渐变线上的停止颜色， 类似于线性渐变的< color- stop>， 渐变线从中心点向右扩散。 其中0%表示渐变线的起始点， 100%表示渐变线的与渐变容器相交结束的位置， 而且其 颜色停止可以定义一个负值。

：css3重复线性渐变

可以使用重复线性渐变repeating-linear-gradient 属性代替线性渐变linear-gradient。 它们采取相同的值， 但色标在两个方向上都无限重复。 不过使用百分比设置色标的位置没有多大的意义， 但 使用像素和其他的单位重复线性渐变可以创建一些很酷的效果，

：css3重复径向渐变

以同样的方式， 使用相关的属性创建重复的径向渐变， 其语法和radial- gradient 类似， 只是以一个径向渐变为基础进行重复渐变，

在css3中渐变特性主要包括

线性渐变( linear- gradient)、

径向渐变( radial- gradient)、

重复线性渐变( repeating- linear- gradient)

重复径向渐变( repeating- radial- gradient) 四种。其中线性渐变和重复线性渐变语法相同， 而径向渐变和重复径向渐变的语法相同。

从本质上说， 渐变就是背景属性中的background-image， 浏览器直接将渐变生成图片， 可以直接使用 css 背景属性来控制它们。

。。。。。。

十二，css3变形

css2. 1 中的页面都是静态的， 师也习惯把它作为页面效果的设计工具。 多年来， web设计师依赖于图片、 flash或 javascript才能完成修改页面的外观。 css3将改变设计师这种思维，借助 css3可以轻松 倾斜、 缩放、 移动 以及翻转元素。

2012年9月， w3c组织发布了css3变形工作草案。 允许css把元素转变为2d或3d空间， 这个草案包括了css32d变形和css33d变形。 css3变形是一 些效果的集合， 比如 平移、 旋转、 缩放 和 倾斜效果， 每个效果都称为变形函数( transform function)， 它们可以操控元素发生旋转、 缩放、 平移 等 变化。 这些效果在之前都需要依赖图片、 flash或 javascript才能完成。 而使用纯 css 来完成 这些变形无须加载这些额外的文件， 再一次提升了开发效率， 提高了页面的执行效率。

css 变形属性及函数

css 变形允许动态的控制元素， 可以在屏幕周围移动它们， 缩小或扩大、 旋转， 或结合所有这些产生复杂的动画效果。 通过css变形， 可以让元素生成静态视觉效果， 也可以很容易结合css3的 transition和动画的keyframe产生 一些动画效果：

·css3变形中具有 x/ y可用的函数： translatex()、 translatey()、 scalex()、 scaley()、 skewx() 和 skewy()。

·css32d变形函数包括： translate()、 scale()、 rotate() 和 skew()。 translate()函数接受css的标准度量单位; scale()函数接受 一个 0 ～ 1 之间的十进制值; rotate() 和 skew() 两个函数都接受 一个径向的度量单位值deg。 除了rotate()函数之外， 每个函数都接受x轴和y轴的参数。 2d变形中还有一个矩阵matrix()函数， 包括6个参数。

·css3 3d变形函数包括： rotatex()、 rotatey()、 rotate3d()、 translatez()、 translate3d()、 scalez() 和scale3d()。 3d变形中也包括一个矩阵matrix3d()函数， 包括16 个参数。

css 变形属性详解

transform属性指一组转换函数， transform-origin属性指定元素的中心点在哪， 新增加了第三个数transform-origin-z， 控制元素三维空间中心点。 transform- style的值设置为 preserve- 3d， 建立 一个3d渲染环境。

：css3 2d变形

在二维或三维空间， 元素可以被扭曲、 移位或旋转。 只不过2d变形工作在x轴和y轴， 也就是大家常说的水平轴和垂直轴; 而3d变形工作在x轴和y轴之外， 还有一个z 轴， 这些3d变换不仅可以 定义元素的长度和宽度， 还有深度。 首先讨论元素在2d平面如何变换， 然后在进入3d变换的讨论。 css3 2d变换让web设计师有了更多的*来装饰和变形html， 同时有更多的功能装饰文本 和更多的动画选项来装饰p元素。

2d 位移

在这里 translate是一种方法， 将元素向指定的方向移动， 类似于position中的relative。 可以简单理解为， 使用translate()函数可以把元素从原来的位置移动， 而不影响在 x、 y 轴上任何组件。

translate() 函数可以取一个值tx，也可以取两个值tx和 ty，

·tx：代表x轴( 横坐标)移动的向量长度， 当其值为正值时， 元素向x轴右方向移动， 反之其值为负值时， 元素向x轴左方向移动。

·ty：代表y轴( 纵坐标) 移动的向量长度，当其值为正值时， 元素向y轴下方向移动， 反之其值为负值时， 元素向y轴上方向移动。 如果ty没有显式设置时， 相当于ty=0。

结合起来， translate()函数移动元素主要有以下三种移动。

·水平移动： 向右移动 translate( tx, 0) 和向左移动 translate(- tx, 0)。

·垂直移动：向上移动 translate( 0,- ty) 和向下移动 translate( 0, ty)。

·对角移动：右下角移动 translate( tx, ty)、右上角移动translate( tx,- ty)、 左上角移动translate(- tx,- ty) 和左下角移动translate(- tx, ty)。

如果要将对象沿着一个方向移动， 如沿着水平轴或者纵轴移动， 可以使用translate( tx, 0) 和translate( 0, ty)来实现。 其实在变形中还为单独一个方向移动对象提供了更简单的方法。

·translatex()：水平方向移动一个对象。 通过给定一个x轴方向的数值指定对象沿水平轴方向的位移。简单点说，对象只向x轴进行移动， 如果值为正值， 对象向右移动; 如果值为负值， 对象向左 移动。

·translatey()：纵轴方向移动一个对象。 通过给定一个y轴方向的数值指定对象沿纵轴方向的位移。 简单点说，对象只向y轴进行移动，如果值为正值，对象向下移动; 如果值为负值，对象 向上 移动。 这两个函数和前面介绍的 translate()函数不同的是每个方法只接受一个值。

·transform: translate(- 100px, 0) 实际上 等于 transform: translatex(- 100px)。

·transform: translate( 0,- 100px) 实际上 等于 transform: translatey(- 100px)。

2d缩放

缩放函数scale()让元素根据中心原点对对象进行缩放， 默认值为 1。 因此0. 01到 0. 99之间的任何值， 使一个元素缩小; 而任何大于或等于 1. 01的值， 让元素显得更大。

缩放scale()函数和translate()函数的语法非常相似， 可以接受一个值， 也可以接受两个值， 只有一个值时， 其第二个值默认与第一个值相等。

其 取值 简单 说明 如下：

·sx：指定横向坐标( x 轴)方向的缩放向量， 如果值为0. 01 ～ 0. 99之间， 会让对象在x 轴方向缩小， 如果值大于或等于1. 01， 对象在x 轴方向放大。

·sy：指定纵向坐标( y 轴)方向的缩放量， 如果值为 0. 01 ～ 0. 99 之间， 会让对象在y轴方向缩小， 如果值大于或等于1. 01， 对象在y 轴方向放大。

·scalex()：相当于 scale( sx, 1)。 表示元素只在x轴( 水平 方向) 缩放元素， 默认值是 1。

·scaley()：相当于 scale( 1, sy)。 表示元素只在y轴( 纵横 方向) 缩放元素， 默认值是 1。

2d旋转

旋转函数rotate()通过指定的角度参数对元素根据对象原点指定 一个2d旋转。 主要在二维空间内进行操作，接受一个角度值， 用来指定旋转的幅度。 如果这个值为正值， 元素相对原点中心顺时针 旋转; 如果这个值为负值， 元素相对原点中心逆时针旋转。

rotate() 函数只接受一个值a， 代表旋转的角度值。 其取值可以是正的， 也可以是负的。

·取值为正值时， 元素默认相对元素中心点顺时针旋转。

·取值为负值时， 元素默认相对元素中心点逆时针旋转。

2d倾斜

倾斜函数skew()能够让元素倾斜显示， 可以将一个对象以其中心位置围绕着x轴和y轴 按照一定的角度倾斜。 与rotate()函数的旋转不同， rotate()函数只是旋转， 而不会改变元素的形状。 skew() 函数 不会旋转， 而只会改变元素的形状。

·ax： 指定元素水平方向( x 轴 方向) 倾斜的角度。

·ay： 指定元素垂直方向( y 轴 方向) 倾斜的角度。

skew() 函数和css3变形中的 translate()、 scale()函数一样， 除了可以使用 skew( tx, ty)函数让元素相于元素中心为原点在x轴和y轴倾斜之外， 还可以使用使用 skewx() 和 skewy() 函数让元素只在 水平或垂直方向倾斜。

·skewx()：相当于skew( ax, 0) 和 skew( ax)。按给定的角度沿x轴指定一个倾斜变形。 skewx()使元素以其中心为基点， 并在水平方向( x 轴)进行倾斜变形。

·skewy()：相当于skew( 0, ay)。按给定的角度沿y轴指定一个倾斜变形。 skewy()用来设置元素以其中心为基点并按给定的角度在垂直方向( y 轴) 倾斜变形。

在默认情况下，skew()函数都是以元素的原中心点对元素进行倾斜变形，但是同样可以根据 transform- origin 属性， 重新设置元素基点对元素进行倾斜变形。另外，skew()函数和制图软件中的变形 工具所起作用类似，

2d矩阵

css3中transform让操作变形变得很简单， 如位移函数translate()、 缩放函数scale()、 旋转函数rotate() 和倾斜函数skew()。 这几个函数很简单， 也很方便， 但是变形中的矩阵函数matrix()不常用。 当然， web 设计师可以使用 rotate()、 skew()、 scale() 和 translate() 函数来满足它们的变形需要， 那为什么要使用矩阵matrix() 呢? 在css3中的变形函数都可以使用matrix()函数来代替。

：css3 3d变形

使用二维变形能够改变元素在水平和垂直轴线， 然而还有一个轴沿着它， 可以改变元素。 使用三维变形， 可以改变元素在z 轴位置。 三维变换使用基于二维变换的相同属性， 如果熟悉二维变换会 发现， 3d变形的功能和2d变换的功能类似。 css3中的3d变换主要包括以下几种功能函数：

·3d 位移： 包括 translatez() 和 translate3d() 两个功能函数。

·3d 旋转： 包括 rotatex()、 rotatey()、 rotatez() 和 rotate3d() 四个功能函数。

·3d 缩放： 包括 scalez() 和 scale3d() 两个功能函数。

·3d 矩阵： 和 2d 变形一样， 也有 一个 3d矩阵功能函数 matrix3d()。

css3中3d 位移

主要包括两种函数 translatez() 和 translate3d()。

36. translate3d()函数的语法translate3d()函数使一个元素在三维空间移动。 这种变形的特点是， 使用三维向量的坐标定义元素在每个方向移动多少。

translate3d( tx, ty, tz)

其属性值取值说明如下：

·tx：代表横向坐标位移向量的长度;

·ty：代表纵向坐标位移向量的长度;

·tz：代表z轴位移向量的长度。 此值不能是一个百分比值， 如果取值为百分比值， 将会认为无效值。

37. translatez()函数，功能是让元素在3d空间沿z轴进行位移，

translate( t)

取值t指的是z轴的向量位移长度。使用 translatez()函数可以让元素在z 轴进行位移，当其值为负值时，元素在z 轴越移越 远，导致元素变得较小。反之，当其值为正值时，元素在z轴越移越近， 导致 元素变得较大。

translatez() 函数在实际使用中等同于translate3d( 0, 0, tz)。仅从视觉效果上看， translatez() 和 translate3d( 0, 0, tz) 函数功能非常类似于二维空间的 scale() 缩放 函数， 但实际上完全不同。 translatez() 和 translate3d( 0, 0, tz) 变形是发生在z轴上， 而不是x轴和y轴。 当使用3d变形， 能够在z轴上移动一个元素确实有很大的好处， 比如说在创建一个3d立方体的盒子之时。

css3中3d 缩放

scalez() 和 scale3d() 函数单独使用时没有任何效果， 需要配合其他的变形函数一起使用才会有效果。

css3 3d变形中的缩放主要有scalez()和scale3d()两种函数， 当scale3d()中x轴和y轴同时为1， 即scale3d( 1, 1, sz)，其效果等同于scalez( sz)。

38. scalez()3d缩放函数， 可以让元素在z轴上按比例缩放。 默认值为1， 当值大于1 时， 元素放大， 小于1大于0. 01时， 元素缩小。

scale3d( sx, sy, sz)

sx： 横向缩放比例

sy： 纵向缩放比例

sz： z轴缩放比例。

css3中 3d 旋转

在三维变形中， 可以让元素在任何轴旋转。 为此， css3新增三个旋转函数 rotatex()、 rotatey() 和 rotatez()。

在 三维空间 里， 使用 rotatex()、 rotatey() 和 rotatez() 函数 让 一个 元素 围绕 x、 y、 z 轴 旋转， 其 基本 语法 如下：

rotatex( a)

rotatey( a)

rotatez( a)

其中 a 指的是一 个旋转角度值， 其值可以是正值也可以是负值。 如果值为正值， 元素顺时针旋转; 反之， 值为负， 元素围绕逆时针旋转。

rotatez() 函数 指定 元素 围绕 z 轴 旋转， 如果 仅 从 视觉 角度 上看， rotatez() 函数 让 元素 顺时针 或 逆时针 旋转， 并且 效果 和 rotate() 效果 等同， 但不 是在 2d 平面 旋转。 在 三维空间 里， 除了 rotatex()、 rotatey() 和 rotatez() 函数 可以 让 一个 元素 在 三维空间 中 旋转 之外， 还有 一个 属性 函数 rotate3d()