文章目录

  • CSS3
  • 1.浏览器厂商前缀
  • 2.CSS3 边框
    • 2.1 CSS3 圆角边框（border-radius）
      • 2.1.1 浏览器支持
    • 2.2 CSS3 盒阴影（ box-shadow）
    • 2.3 CSS3 边界图片（border-image ）
  • 3.CSS3 背景
    • 3.1 浏览器支持
    • 3.2 CSS3 background-image属性
    • 3.3 CSS3 background-size 属性
    • 3.4 CSS3 的 background-origin 属性
    • 3.5 CSS3 多个背景图像
    • 3.6 CSS3 background-clip属性
  • 4.CSS3 渐变（Gradients）
    • 4.1 浏览器支持
    • 4.2 CSS3 线性渐变
      • 4.2.1 线性渐变 - 从上到下（默认情况下）
      • 4.2.2 线性渐变 - 从左到右
      • 4.2.3 线性渐变 - 对角
      • 4.2.4 使用角度
      • 4.2.5 使用多个颜色节点
      • 4.2.6 使用透明度（transparent）
      • 4.2.7 重复的线性渐变
    • 4.3 CSS3 径向渐变
      • 4.3.1 径向渐变 - 颜色节点均匀分布（默认情况下）
      • 4.3.2 径向渐变 - 颜色节点不均匀分布
      • 4.3.3 设置形状
      • 4.3.4 不同尺寸大小关键字的使用
      • 4.3.5 重复的径向渐变
  • 5.CSS3 文本效果
    • 5.1 浏览器支持
    • 5.2 CSS3 的文本阴影（text-shadow）
    • 5.3 CSS3 box-shadow属性
    • 5.4 阴影的一个使用特例是卡片效果
      • 5.4.1 文字卡片
      • 5.4.2 图片卡片
    • 5.5 CSS3 Text Overflow属性
    • 5.6 CSS3的换行
    • 5.7 CSS3 单词拆分换行
    • 5.8 新文本属性
  • 6.CSS3 字体
    • 6.1 浏览器支持
    • 6.2 CSS3 @font-face 规则
    • 6.3 使用粗体文本
  • 7.CSS3 转换
    • 7.1 它是如何工作？
    • 7.2 浏览器支持
    • 7.3 2D 转换
      • 7.3.1 translate() 方法
      • 7.3.2 rotate() 方法
      • 7.3.3 scale() 方法
      • 7.3.4 skew() 方法
      • 7.3.5 matrix() 方法
      • 7.3.6 2D 转换方法
    • 7.4 3D 转换
      • 7.4.1 浏览器支持
      • 7.4.2 rotateX() 方法
      • 7.4.3 rotateY() 方法
      • 7.4.4 转换属性
      • 7.4.5 3D 转换方法
  • 8.CSS3 过渡
    • 8.1 浏览器支持
    • 8.2 它是如何工作？
    • 8.3 多项改变
    • 8.4 过渡属性
  • 9.CSS3 动画
    • 9.1 CSS3 @keyframes 规则
    • 9.2 浏览器支持
    • 9.3 CSS3 动画
    • 9.4 CSS3动画是什么？
    • 9.5 CSS3的动画属性
  • 10.CSS3 多列
    • 10.1 浏览器支持
    • 10.2 CSS3 多列属性
    • 10.3 CSS3 创建多列
    • 10.4 CSS3 多列中列与列间的间隙
    • 10.5 CSS3 列边框
    • 10.6 指定元素跨越多少列
    • 10.7 指定列的宽度
    • 10.8 CSS3 多列属性
  • 11.CSS3 用户界面
    • 11.1 浏览器支持
    • 11.2 CSS3 调整尺寸(Resizing)
    • 11.3 CSS3 方框大小调整(Box Sizing)
    • 11.4 CSS3 外形修饰（outline-offset ）
    • 11.5 新的用户界面特性
  • 12.CSS3 图片
    • 12.1 圆角图片
    • 12.2 缩略图
    • 12.3 响应式图片
    • 12.4 图片文本
    • 12.5 卡片式图片
    • 12.6 图片滤镜
    • 12.7 响应式图片相册
    • 12.8 图片 Modal(模态)
  • 13.CSS3 按钮
    • 13.1 基本按钮样式
    • 13.2 按钮颜色
    • 13.3 按钮大小
    • 13.4 圆角按钮
    • 13.5 按钮边框颜色
    • 13.6 鼠标悬停按钮
    • 13.7 按钮阴影
    • 13.8 禁用按钮
    • 13.9 按钮宽度
    • 13.10 按钮组
    • 13.11 带边框按钮组
    • 13.12 按钮动画
  • 14.CSS3 分页
    • 14.1 简单分页
    • 14.2 点击及鼠标悬停分页样式
      • 14.2.1 圆角样式
      • 14.2.2 鼠标悬停过渡效果
    • 14.3 带边框分页
      • 14.3.1 圆角边框
      • 14.3.2 分页间隔
    • 14.4 分页字体大小
    • 14.5 居中分页
    • 14.6 面包屑导航
  • 15.CSS3 框大小
    • 15.1 浏览器支持
    • 15.2 不使用 CSS3 box-sizing 属性
    • 15.3 使用 CSS3 box-sizing 属性
  • 16.CSS3 弹性盒子(Flex Box)
    • 16.1 浏览器支持
    • 16.2 CSS3 弹性盒子内容
    • 16.3 flex-direction
    • 16.4 justify-content 属性
    • 16.5 align-items 属性
    • 16.6 flex-wrap 属性
    • 16.7 align-content 属性
    • 16.8 弹性子元素属性
      • 16.8.1 排序
      • 16.8.2 对齐
      • 16.8.3 完美的居中
      • 16.8.4 align-self
      • 16.8.5 flex
    • 16.9 CSS3 弹性盒子属性
  • 17.CSS3 多媒体查询
    • 17.1 CSS2 多媒体类型
    • 17.2 CSS3 多媒体查询
    • 17.3 浏览器支持
    • 17.4 多媒体查询语法
    • 17.5 CSS3 多媒体类型
    • 17.6 多媒体查询简单实例
    • 17.7 CSS3 多媒体查询实例
      • 17.7.1 520 到 699px 宽度 - 添加邮箱图标
      • 17.7.2 700 到 1000px - 添加文本前缀信息
      • 17.7.3 大于 1001px 宽度 - 添加邮件地址
      • 17.7.4 大于 1151px 宽度 - 添加图标

CSS3

  • 在CSS2的基础上新增（扩展）样式
  • 移动端支持优于PC端
  • 不断改进中
  • 应用相对广泛

1.CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。

2.CSS3的主要新特性：
1）选择器
2）阴影
3）形状转换（2D <-> 3D）
4）变形
5）动画（过渡动画、帧动画）
6）边框
7）多重背景
8）反射
9）文字
10）颜色函数（rgba/hsl/hsla）
11）滤镜（filter）
12）弹性布局
13）多列布局
14）栅格布局
15）盒模型
16）Web字体
17）媒体查询

1.浏览器厂商前缀

CSS3不是属于浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。

1）主流浏览器内核：

​ a)Trident: IE内核
​ b)Webkit：Chrome和Safari内核
​ c)Gecko：FireFox内核
​ d)Blink（是Webkit的一个分支）： Chrome和Opera内核

Tips（技巧）:
目前国内的浏览器大多都是双核的（IE内核+Chrome内核）

厂商前缀：

​ IE： -ms-
​ Chrome&Safari： -webkit-
​ FireFox： -moz-
​ Opera： -o-

2.CSS3 边框

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。

有以下的边框属性：

border-radius（圆角）
box-shadow（阴影）
border-image（边界图片）

2.1 CSS3 圆角边框（border-radius）

在 CSS2 中添加圆角很棘手。我们不得不在每个角落使用不同的图像。

在 CSS3 中，很容易创建圆角。

在 CSS3 中 border-radius 属性被用于创建圆角。

实例：

<style>#example1
{border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:300px;border-radius:25px;
}
#example2 {border: 2px solid red;padding: 10px;border-radius: 50px 20px;
}</style>
</head>
<body>
<div id="example1"><p>border-radius 属性允许您为元素添加圆角边框！</p>
</div>
<br><br>
<div id="example2"><p>如果设置了两个值，第一个用于左上角和右下角，第二个用于右上角和左下角。</p>
</div>
</body>

​ border-radius后面带一个参数对应四个角；

​ border-radius后面带二个参数，第一个参数对应左上角和右下角，第二个参数对应右上角和左下角；

​ border-radius后面带三个参数，第一个参数对应左上角，第二个参数对应右上角和左下角；第三个参数对应右下角；

​ border-radius后面带四个参数，第一个参数对应左上角，第二个参数对应右上角，第三个参数对应右下角，第四个参数对应左下角；

属性 描述
border-radius 所有四个边角 border- * - * -radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度

2.1.1 浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。

2.2 CSS3 盒阴影（ box-shadow）

CSS3 中的 box-shadow 属性被用来添加阴影 （IE9以上支持）

box-shadow: 水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];

实例：

<style>div
{width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 5px #888888;
}</style>
</head>
<body><div>12</div></body>

2.3 CSS3 边界图片（border-image ）

有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框 (IE11.0及以后版本支持）

border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像

border-image：图片 向内偏移距离 宽度 图像区域超出边框的距离 重复效果;

​ 重复效果：round（铺满）/strech（拉伸）/repeat（平铺）

实例：

<style>div
{border:15px solid transparent;width:250px;padding:10px 20px;
}#round
{-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */-o-border-image:url(border.png) 30 30 round; /* Opera */border-image:url(border.png) 30 30 round;
}#stretch
{-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */-o-border-image:url(border.png) 30 30 stretch; /* Opera */border-image:url(border.png) 30 30 stretch;
}</style>
</head>
<body><p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p><div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div><p>这是我们使用的图片素材：</p>
<img src="/images/border.png" /></body>

3.CSS3 背景

CSS3 中包含几个新的背景属性，提供更大背景元素控制。

  • background-image
  • background-size（背景图片的尺寸）
  • background-origin（背景图片的定位区域）
  • background-clip（背景图片的尺寸）

3.1 浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

3.2 CSS3 background-image属性

CSS3中可以通过background-image属性添加背景图片。

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

实例：

<style>#example1 {background-image: url(img_flwr.gif), url(paper.gif);background-position: right bottom, left top;background-repeat: no-repeat, repeat;padding: 15px;
}</style>
</head>
<body><div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div></body>

可以给不同的图片设置多个不同的属性：

<style>#example1 {background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;padding: 15px;
}</style>
</head>
<body><div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div></body>

3.3 CSS3 background-size 属性

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

你指定的大小是相对于父元素的宽度和高度的百分比的大小。

重置背景图像-实例：

<style>body
{background:url(/try/demo_source/img_flwr.gif);background-size:80px 60px;background-repeat:no-repeat;padding-top:40px;
}</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p><p>原始图片: <img src="/try/demo_source/img_flwr.gif"  alt="Flowers" width="224" height="162"></p></body>

伸展背景图像完全填充内容区域-实例：

<style>div
{background:url(img_flwr.gif);background-size:100% 100%;background-repeat:no-repeat;
}</style>
</head>
<body><div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div></body>

3.4 CSS3 的 background-origin 属性

background-origin 属性指定了背景图像的位置区域。

content-box, padding-box,和 border-box区域内可以放置背景图像。

在 content-box 中定位背景图片-实例：

<style>div
{border:1px solid black;padding:35px;background-image:url('smiley.gif');background-repeat:no-repeat;background-position:left;
}
#div1
{background-origin:border-box;
}
#div2
{background-origin:content-box;
}</style>
</head>
<body><p>背景图像边界框的相对位置：</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><p>背景图像的相对位置的内容框：</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div></body>

3.5 CSS3 多个背景图像

CSS3 允许你在元素上添加多个背景图像。

在 body 元素中设置两个背景图像-实例：

<style>#example1 {background-image: url(img_flwr.gif), url(paper.gif);background-position: right bottom, left top;background-repeat: no-repeat, repeat;padding: 15px;
}</style>
</head>
<body><div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div></body>

3.6 CSS3 background-clip属性

CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

实例：

<style>#example1 {border: 5px dotted black;padding:15px;background: yellow;
}#example2 {border: 5px dotted black;padding:15px;background: yellow;background-clip: padding-box;
}#example3 {border: 5px dotted black;padding:15px;background: yellow;background-clip: content-box;
}</style>
</head>
<body><p>没有背景剪裁 (border-box没有定义):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div><p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div><p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div></body>

4.CSS3 渐变（Gradients）


CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
  • 径向渐变（Radial Gradients）- 由它们的中心定义

4.1 浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。

4.2 CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

线性渐变的实例：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

4.2.1 线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色

从上到下的线性渐变-实例：

<style>#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: linear-gradient(#e66465, #9198e5);
}</style>
</head>
<body><h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p><div id="grad1"></div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p></body>

4.2.2 线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到黄色

从左到右的线性渐变-实例：

<style>#grad1 {height: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to right, red , yellow);
}</style>
</head>
<body><h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：</p><div id="grad1"></div></body>

4.2.3 线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色

从左上角到右下角的线性渐变-实例：

<style>#grad1 {height: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to bottom right, red , yellow);
}</style>
</head>
<body><h3>线性渐变 - 对角</h3>
<p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：</p><div id="grad1"></div></body>

4.2.4 使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法：

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。


但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度

带有指定的角度的线性渐变-实例：

<style>#grad1 {height: 100px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(0deg, red, yellow);
}#grad2 {height: 100px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(90deg, red, yellow);
}#grad3 {height: 100px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(180deg, red, yellow);
}#grad4 {height: 100px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(-90deg, red, yellow);
}</style>
</head>
<body><h3>线性渐变 - 使用不同的角度</h3><div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p></body>

4.2.5 使用多个颜色节点

下面的实例演示了如何设置多个颜色节点

带有多个颜色节点的从上到下的线性渐变-实例：

<style>#grad1 {height: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}#grad2 {height: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}#grad3 {height: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */
}</style>
</head>
<body><h3>3 个颜色结点（均匀分布）</h3>
<div id="grad1"></div><h3>7 个颜色结点（均匀分布）</h3>
<div id="grad2"></div><h3>3 个颜色结点（不均匀分布）</h3>
<div id="grad3"></div><p><strong>注意：</strong> 当指定百分比时，颜色是不均匀分布。</p>
<p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p></body>


下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变

实例：

<style>#grad1 {height: 55px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}</style>
</head>
<body><div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
渐变背景
</div><p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p></body>

4.2.6 使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色

从左到右的线性渐变，带有透明度-实例：

<style>#grad1 {height: 200px;background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}</style>
</head>
<body><h3>线性渐变 - 透明度</h3>
<p>为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。</p><div id="grad1"></div><p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p></body>

4.2.7 重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变

实例：

<style>#grad1 {height: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}#grad2 {height: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}#grad3 {height: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}#grad4 {height: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}</style>
</head>
<body><h1>重复的线性渐变</h1><div id="grad1"></div><p>45deg:</p>
<div id="grad2"></div><p>190deg:</p>
<div id="grad3"></div><p>90deg:</p>
<div id="grad4"></div><p><strong>注意:</strong> Internet Explorer 9 及更早版本的 IE 浏览器不支持线性渐变。</p></body>


4.3 CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

径向渐变的实例：

语法：

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

4.3.1 径向渐变 - 颜色节点均匀分布（默认情况下）

颜色节点均匀分布的径向渐变-实例：

<style>#grad1 {height: 150px;width: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}</style>
</head>
<body><h3>径向渐变 - 颜色结点均匀分布</h3>
<div id="grad1"></div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p></body>

4.3.2 径向渐变 - 颜色节点不均匀分布

颜色节点不均匀分布的径向渐变-实例：

<style>#grad1 {height: 150px;width: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}</style>
</head>
<body><h3>径向渐变 - 颜色结点不均匀分布</h3>
<div id="grad1"></div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p></body>

4.3.3 设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

形状为圆形的径向渐变-实例：

<style>#grad1 {height: 150px;width: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
}#grad2 {height: 150px;width: 200px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
}</style>
</head>
<body><h3>径向渐变 - 形状</h3><p><strong>椭圆形 Ellipse（默认）：</strong></p>
<div id="grad1"></div><p><strong>圆形 Circle：</strong></p>
<div id="grad2"></div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p></body>

4.3.4 不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

带有不同尺寸大小关键字的径向渐变-实例：

<style>#grad1 {height: 150px;width: 150px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}#grad2 {height: 150px;width: 150px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}#grad3 {height: 150px;width: 150px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}#grad4 {height: 150px;width: 150px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}</style>
</head>
<body><h3>径向渐变 - 不同尺寸大小关键字的使用</h3><p><strong>closest-side：</strong></p>
<div id="grad1"></div><p><strong>farthest-side：</strong></p>
<div id="grad2"></div><p><strong>closest-corner：</strong></p>
<div id="grad3"></div><p><strong>farthest-corner（默认）：</strong></p>
<div id="grad4"></div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p></body>


4.3.5 重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变

一个重复的径向渐变-实例：

<style>#grad1 {height: 200px;background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}</style>
</head>
<body><h3>重复的径向渐变</h3><div id="grad1"></div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p></body>

5.CSS3 文本效果

CSS3中包含几个新的文本特征。

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • word-break

5.1 浏览器支持

5.2 CSS3 的文本阴影（text-shadow）

CSS3 中，text-shadow属性适用于文本阴影。

text-shadow: 水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];

您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

给标题添加阴影-实例：

<style>h1
{text-shadow: 5px 5px 5px #FF0000;
}</style>
</head>
<body><h1>Text-shadow effect!</h1><p><b>注意:</b> Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow属性.</p></body>

5.3 CSS3 box-shadow属性

CSS3 中 CSS3 box-shadow 属性适用于盒子阴影

实例：

<style>div
{width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 5px #888888;
}</style>
</head>
<body><div></div></body>

接下来给阴影添加颜色

实例：

<style>div {width: 300px;height: 100px;padding: 15px;background-color: yellow;box-shadow: 10px 10px grey;
}</style>
</head>
<body><div>This is a div element with a box-shadow</div></body>

接下来给阴影添加一个模糊效果

实例：

<style>div {width: 300px;height: 100px;padding: 15px;background-color: yellow;box-shadow: 10px 10px 5px grey;
}</style>
</head>
<body><div>This is a div element with a box-shadow</div></body>

也可以在 ::before 和 ::after 两个伪元素中添加阴影效果

实例：

<style>#boxshadow {position: relative;-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);padding: 10px;background: white;
}/* Make the image fit the box */
#boxshadow img {width: 100%;border: 1px solid #8a4419;border-style: inset;
}#boxshadow::after {content: '';position: absolute;z-index: -1; /* hide shadow behind image */-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);width: 70%;left: 15%; /* one half of the remaining 30% */height: 100px;bottom: 0;
}</style>
</head>
<body><div id="boxshadow"><img src="rock600x400.jpg" alt="Norway" width="600" height="400">
</div></body>

5.4 阴影的一个使用特例是卡片效果

5.4.1 文字卡片

<style>div.card {width: 250px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);text-align: center;
}div.header {background-color: #4CAF50;color: white;padding: 10px;font-size: 40px;
}div.container {padding: 10px;
}</style>
</head>
<body><h2>卡片</h2><p>box-shadow 属性用来可以创建纸质样式卡片:</p><div class="card"><div class="header"><h1>1</h1></div><div class="container"><p>January 1, 2016</p></div>
</div></body>

5.4.2 图片卡片

<style>div.polaroid {width: 250px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);text-align: center;
}div.container {padding: 10px;
}</style>
</head>
<body><h2> 卡片</h2><p>box-shadow属性可以用来创建纸质样式卡片:</p><div class="polaroid"><img src="rock600x400.jpg" alt="Norway" style="width:100%"><div class="container"><p>Hardanger, Norway</p></div>
</div></body>

5.5 CSS3 Text Overflow属性

CSS3文本溢出属性指定应向用户如何显示溢出内容

实例：

<style>div.test
{white-space:nowrap; width:12em; overflow:hidden; border:1px solid #000000;
}</style>
</head>
<body><p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
<p>div 使用 &quot;text-overflow:ellipsis&quot;:</p><div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 &quot;text-overflow:clip&quot;:</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 &quot;text-overflow: &gt;&gt;&quot;(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
</body>

5.6 CSS3的换行

如果某个单词太长，不适合在一个区域内，它扩展到外面

CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字

word-wrap: normal（文本符号处换行）|break-word（长文本换行）;

允许长文本换行-实例：

<style>p.test
{width:11em; border:1px solid #000000;word-wrap:break-word;
}</style>
</head>
<body><p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p></body>

5.7 CSS3 单词拆分换行

CSS3 单词拆分换行属性指定换行规则：

word-break: normal|break-all|keep-all;

实例：

<style>p.test1
{width:9em; border:1px solid #000000;word-break:keep-all;
}p.test2
{width:9em; border:1px solid #000000;word-break:break-all;
}</style>
</head>
<body><p class="test1"> This paragraph contains some text. This line will-break-at-hyphenates.</p>
<p class="test2"> This paragraph contains some text: The lines will break at any character.</p><p><b>注意:</b>  word-break 属性不兼容 Opera.</p></body>

5.8 新文本属性

属性 描述
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 允许对长的不可分割的单词进行分割并换行到下一行。

6.CSS3 字体

6.1 浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。


Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.

Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。

Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.

注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

6.2 CSS3 @font-face 规则

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。

您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)

实例：

<style>@font-face
{font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9 */
}div
{font-family:myFirstFont;
}</style>
</head>
<body><p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字体.</p><div>
使用 CSS3,网站终于可以使用字体以外的预先选择“合法”字体
</div></body>

6.3 使用粗体文本

您必须添加另一个包含粗体文字的@font-face规则

实例：

<style>@font-face
{font-family: myFirstFont;src: url(sansation_light.woff);
}@font-face
{font-family: myFirstFont;src: url(sansation_bold.woff);font-weight:bold;
}div
{font-family:myFirstFont;
}</style>
</head>
<body><div>使用 CSS3,网站终于可以使用字体以外的预先选择“合法”字体。
</div><p><b>注意:</b> Internet Explorer 8以及更早版本的浏览器 @font-face rule.</p></body>


该文件"Sansation_Bold.ttf"是另一种字体文件，包含Sansation字体的粗体字。

浏览器使用这一文本的字体系列"myFirstFont"时应该呈现为粗体。

这样你就可以有许多相同的字体@font-face的规则。

7.CSS3 转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

7.1 它是如何工作？

转换的效果是让某个元素改变形状，大小和位置。

您可以使用 2D 或 3D 转换来转换您的元素。

7.2 浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。


Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： Internet Explorer 9 要求前缀 -ms- 版本.

7.3 2D 转换

2D变换方法：

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

实例：

<style>div
{width:200px;height:100px;background-color:red;/* Rotate div */transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-webkit-transform:rotate(30deg); /* Safari and Chrome */
}</style>
</head>
<body><div>Hello</div></body>

7.3.1 translate() 方法


translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

实例：

<style>div
{width:100px;height:75px;background-color:red;border:1px solid black;
}
div#div2
{transform:translate(50px,100px);-ms-transform:translate(50px,100px); /* IE 9 */-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}</style>
</head>
<body><div>Hello. This is a DIV element.</div><div id="div2">Hello. This is a DIV element.</div></body>


translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

7.3.2 rotate() 方法


rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

实例：

<style>div
{width:100px;height:75px;background-color:red;border:1px solid black;
}
div#div2
{transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-webkit-transform:rotate(30deg); /* Safari and Chrome */
}</style>
</head>
<body><div>你好。这是一个 DIV 元素。</div><div id="div2">你好。这是一个 DIV 元素。</div></body>


rotate值（30deg）元素顺时针旋转30度。

7.3.3 scale() 方法


scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

实例：

<style>div {margin: 150px;width: 200px;height: 100px;background-color: yellow;border: 1px solid black;border: 1px solid black;-ms-transform: scale(2,3); /* IE 9 */-webkit-transform: scale(2,3); /* Safari */transform: scale(2,3); /* 标准语法 */
}</style>
</head>
<body><p>scale() 方法用于增加或缩小元素的大小。</p><div>
div 元素的宽度是原始大小的两倍，高度是原始大小的三倍。
</div></body>


scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

7.3.4 skew() 方法

语法：

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

  • skewX(< angle>);表示只在X轴(水平方向)倾斜。
  • skewY(< angle>);表示只在Y轴(垂直方向)倾斜。

实例：

<style>div
{width:100px;height:75px;background-color:red;border:1px solid black;
}
div#div2
{transform:skew(30deg,20deg);-ms-transform:skew(30deg,20deg); /* IE 9 */-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}</style>
</head>
<body><div>Hello. This is a DIV element.</div><div id="div2">Hello. This is a DIV element.</div></body>


skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。

7.3.5 matrix() 方法


matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

利用matrix()方法旋转div元素30°-实例：

<style>div
{width:100px;height:75px;background-color:red;border:1px solid black;
}
div#div2
{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}</style>
</head>
<body><div>Hello. This is a DIV element.</div><div id="div2">Hello. This is a DIV element.</div></body>

7.3.6 2D 转换方法

函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

7.4 3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

3D 转换方法：

  • rotateX()
  • rotateY()

7.4.1 浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

7.4.2 rotateX() 方法

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

实例：

<style>div
{width:100px;height:75px;background-color:red;border:1px solid black;
}
div#div2
{transform:rotateX(120deg);-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}</style>
</head>
<body><p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.</p><div>Hello. This is a DIV element.</div><div id="div2">Hello. This is a DIV element.</div></body>

7.4.3 rotateY() 方法

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

实例：

<style>div
{width:100px;height:75px;background-color:red;border:1px solid black;
}
div#div2
{transform:rotateY(130deg);-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}</style>
</head>
<body><p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY方法.</p><div>Hello. This is a DIV element.</div><div id="div2">Hello. This is a DIV element.</div></body>

7.4.4 转换属性

下表列出了所有的转换属性：

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3

7.4.5 3D 转换方法

函数 描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

8.CSS3 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

8.1 浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

8.2 它是如何工作？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。

应用于宽度属性的过渡效果，时长为 2 秒-实例：

div
{transition: width 2s;-webkit-transition: width 2s; /* Safari */
}

注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

规定当鼠标指针悬浮(:hover)于 < div>元素上时-实例：

<style>div
{width:100px;height:100px;background:red;transition:width 2s;-webkit-transition:width 2s; /* Safari */
}div:hover
{width:300px;
}</style>
</head>
<body><p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p><div></div></body>


注意： 当鼠标光标移动到该元素时，它逐渐改变它原有样式

8.3 多项改变

要添加多个样式的变换效果，添加的属性由逗号分隔：

添加了宽度，高度和转换效果-实例：

<style>div {width: 100px;height: 100px;background: red;-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */transition: width 2s, height 2s, transform 2s;
}div:hover {width: 200px;height: 200px;-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */transform: rotate(180deg);
}</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p><div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>

8.4 过渡属性

下表列出了所有的过渡属性：

属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

下面的两个例子设置所有过渡属性：

在一个例子中使用所有过渡属性-实例：

<style>div
{width:100px;height:100px;background:red;transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:2s;/* Safari */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;
}div:hover
{width:200px;
}</style>
</head>
<body><p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p><div></div><p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p></body>

与上面的例子相同的过渡效果，但是使用了简写的 transition 属性-实例：

<style>div
{width:100px;height:100px;background:red;transition:width 1s linear 2s;/* Safari */-webkit-transition:width 1s linear 2s;
}div:hover
{width:200px;
}</style>
</head>
<body><p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p><div></div><p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p></body>

9.CSS3 动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

9.1 CSS3 @keyframes 规则

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

9.2 浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

9.3 CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

  • 规定动画的名称
  • 规定动画的时长

把 “myfirst” 动画捆绑到 div 元素，时长：5 秒-实例：

<style>div
{width:100px;height:100px;background:red;animation:myfirst 5s;-webkit-animation:myfirst 5s; /* Safari and Chrome */
}@keyframes myfirst
{from {background:red;}to {background:yellow;}
}@-webkit-keyframes myfirst /* Safari and Chrome */
{from {background:red;}to {background:yellow;}
}</style>
</head>
<body><p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p><div></div></body>


注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

9.4 CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变-实例：

<style>div
{width:100px;height:100px;background:red;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */
}@keyframes myfirst
{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}
}@-moz-keyframes myfirst /* Firefox */
{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}
}@-webkit-keyframes myfirst /* Safari and Chrome */
{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}
}@-o-keyframes myfirst /* Opera */
{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}
}</style>
</head>
<body><div></div><p><b>注释：</b>当动画完成时，会变回初始的样式。</p><p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p></body>

改变背景色和位置-实例：

<style>div
{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s;-webkit-animation:myfirst 5s; /* Safari and Chrome */
}@keyframes myfirst
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}@-webkit-keyframes myfirst /* Safari and Chrome */
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}</style>
</head>
<body><p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p><div></div></body>

9.5 CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 3

下面两个例子设置所有动画属性：

运行myfirst动画，设置所有的属性-实例：

<style>div
{width:100px;height:100px;background:red;position:relative;animation-name:myfirst;animation-duration:5s;animation-timing-function:linear;animation-delay:2s;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:running;/* Safari and Chrome: */-webkit-animation-name:myfirst;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear;-webkit-animation-delay:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;-webkit-animation-play-state:running;
}@keyframes myfirst
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}@-webkit-keyframes myfirst /* Safari and Chrome */
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}</style>
</head>
<body><p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p><div></div></body>

与上面的动画相同，但是使用了简写的动画 animation 属性-实例：

<style>div
{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s linear 2s infinite alternate;/* Firefox: */-moz-animation:myfirst 5s linear 2s infinite alternate;/* Safari and Chrome: */-webkit-animation:myfirst 5s linear 2s infinite alternate;/* Opera: */-o-animation:myfirst 5s linear 2s infinite alternate;
}@keyframes myfirst
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}@-moz-keyframes myfirst /* Firefox */
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}@-webkit-keyframes myfirst /* Safari and Chrome */
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}@-o-keyframes myfirst /* Opera */
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}</style>
</head>
<body><p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p><div></div></body>

10.CSS3 多列

CSS3 可以将文本内容设计成像报纸一样的多列布局.

10.1 浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

10.2 CSS3 多列属性

CSS3 的多列属性：

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

10.3 CSS3 创建多列

column-count 属性指定了需要分割的列数。

以下实例将 < div> 元素中的文本分为 3 列-实例：

<style>.newspaper
{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;
}</style>
</head>
<body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><div class="newspaper">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div></body>

10.4 CSS3 多列中列与列间的间隙

column-gap 属性指定了列与列间的间隙。

以下实例指定了列与列间的间隙为 40 像素-实例：

<style>.newspaper
{column-count:3;column-gap:40px;
}</style>
</head>
<body><div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p></body>

10.5 CSS3 列边框

column-rule-style 属性指定了列与列间的边框样式

实例：

<style>.newspaper
{column-count:3;column-gap:40px;column-rule-style:dotted;/* Firefox */-moz-column-count:3;-moz-column-gap:40px;-moz-column-rule-style:dotted;/* Safari and Chrome */-webkit-column-count:3;-webkit-column-gap:40px;-webkit-column-rule-style:dotted;
}</style>
</head>
<body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div></body>


column-rule-width 属性指定了两列的边框厚度

实例：

<style>.newspaper {/* Chrome, Safari, Opera */-webkit-column-count: 3;-webkit-column-gap: 40px;-webkit-column-rule-style: outset;-webkit-column-rule-width: 1px;/* Firefox */-moz-column-count: 3;-moz-column-gap: 40px;-moz-column-rule-style: outset;-moz-column-rule-width: 1px;column-count: 3;column-gap: 40px;column-rule-style: outset;column-rule-width: 1px;
}</style>
</head>
<body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div></body>


column-rule-color 属性指定了两列的边框颜色

实例：

<style>.newspaper
{column-count:3;column-gap:40px;column-rule-style:outset;column-rule-color:#ff0000;/* Firefox */-moz-column-count:3;-moz-column-gap:40px;-moz-column-rule-style:outset;-moz-column-rule-color:#ff0000;/* Safari and Chrome */-webkit-column-count:3;-webkit-column-gap:40px;-webkit-column-rule-style:outset;-webkit-column-rule-color:#ff0000;
}</style>
</head>
<body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div></body>


column-rule 属性是 column-rule-* 所有属性的简写。

以下实例设置了列直接的边框的厚度，样式及颜色-实例：

<style>.newspaper
{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome */column-gap:40px;-moz-column-rule:4px outset #ff00ff; /* Firefox */-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */column-rule:4px outset #ff00ff;
}</style>
</head>
<body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div></body>

10.6 指定元素跨越多少列

以下实例指定 < h2> 元素跨越所有列-实例：

<style>.newspaper
{column-count:3;-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */}
h2
{column-span:all;-webkit-column-span:all; /* Safari and Chrome */
}</style>
</head>
<body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><div class="newspaper">
<h2>英国维斯米斯特教堂碑文</h2>
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div></body>

10.7 指定列的宽度

column-width 属性指定了列的宽度。

实例：

<style>.newspaper
{column-width:100px;-moz-column-width:100px; /* Firefox */-webkit-column-width:100px; /* Safari and Chrome */
}</style>
</head>
<body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div></body>

10.8 CSS3 多列属性

下表列出了所有 CSS3 的多列属性：

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

11.CSS3 用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

用户界面属性：

  • resize
  • box-sizing
  • outline-offset

11.1 浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

11.2 CSS3 调整尺寸(Resizing)

CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)

由用户指定一个div元素尺寸大小-实例：

<style>div
{border:2px solid;padding:10px 40px; width:300px;resize:both;overflow:auto;
}</style>
</head>
<body><p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p><div>调整属性指定一个元素是否由用户可调整大小的。</div></body>

11.3 CSS3 方框大小调整(Box Sizing)

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

规定两个并排的带边框方框-实例：

<style>#example1 {box-sizing: content-box;  width: 300px;height: 100px;padding: 30px;  border: 10px solid blue;
}#example2 {box-sizing: border-box;width: 300px;height: 100px;padding: 30px;  border: 10px solid blue;
}</style>
</head>
<body><h1>box-sizing 属性</h1>
<p>定义如何计算一个元素的总宽度和总高度，是否包含内边距和边框。</p><h2>box-sizing: content-box (默认):</h2>
<p>高度和宽度只应用于元素的内容:</p>
<div id="example1">这个 div 的宽度为 300px。但完整宽度为 300px + 20px (左边框和右边框) + 60px (左边距和右边距) = 380px!</div><h2>box-sizing: border-box:</h2>
<p>高度和宽度应用于元素的所有部分: 内容、内边距和边框:</p>
<div id="example2">不管如何这里的完整宽度为300px!</div></body>

11.4 CSS3 外形修饰（outline-offset ）

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

  • 轮廓不占用空间
  • 轮廓可能是非矩形

规定边框边缘之外 15 像素处的轮廓-实例：

<style>div
{margin:20px;width:150px; padding:10px;height:70px;border:2px solid black;outline:2px solid red;outline-offset:15px;
}</style>
</head>
<body><p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p><div>这个 div有一个轮廓边界15 px边境外的边缘。</div></body>

11.5 新的用户界面特性

属性 说明 CSS
appearance 允许您使一个元素的外观像一个标准的用户界面元素 3
box-sizing 允许你以适应区域而用某种方式定义某些元素 3
icon 为创作者提供了将元素设置为图标等价物的能力。 3
nav-down 指定在何处使用箭头向下导航键时进行导航 3
nav-index 指定一个元素的Tab的顺序 3
nav-left 指定在何处使用左侧的箭头导航键进行导航 3
nav-right 指定在何处使用右侧的箭头导航键进行导航 3
nav-up 指定在何处使用箭头向上导航键时进行导航 3
outline-offset 外轮廓修饰并绘制超出边框的边缘 3
resize 指定一个元素是否是由用户调整大小 3

12.CSS3 图片

使用 CSS 来布局图片。

12.1 圆角图片

圆角图片-实例：

<style>img {border-radius: 8px;
}</style>
</head>
<body><h2>圆角图片</h2>
<p>使用 border-radius 属性来创建圆角图片:</p><img src="paris.jpg" alt="Paris" width="400" height="300"></body>

椭圆形图片-实例：

<style>img {border-radius: 50%;
}</style>
</head>
<body><h2>椭圆形图片</h2>
<p>使用 border-radius 属性来创建椭圆形图片：</p><img src="paris.jpg" alt="Paris" width="400" height="300"></body>

12.2 缩略图

我们使用 border 属性来创建缩略图。

实例：

<style>img {border: 1px solid #ddd;border-radius: 4px;padding: 5px;
}</style>
</head>
<body><h2>缩略图</h2>
<p>我们使用 border 属性来创建缩略图。</p><img src="paris.jpg" alt="Paris" width="400" height="300"></body>

实例2：

<style>a {display: inline-block;border: 1px solid #ddd;border-radius: 4px;padding: 5px;transition: 0.3s;
}a:hover {box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}</style>
</head>
<body><h2>缩略图作为连接</h2>
<p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>
<p>点击图片查看效果：</p><a target="_blank" href="paris.jpg"><img src="paris.jpg" alt="Paris" width="400" height="300">
</a></body>

12.3 响应式图片

响应式图片会自动适配各种尺寸的屏幕。

你可以通过重置浏览器大小查看效果

如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码-实例：

<style>img {max-width: 100%;height: auto;
}</style>
</head>
<body><h2>响应式图片</h2>
<p>响应式图片会自动适配各种尺寸的屏幕。</p>
<p>通过重置浏览器大小查看效果:</p><img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"></body>

12.4 图片文本

如何定位图片文本


实例：

<style>.container {position: relative;
}.topleft {position: absolute;top: 8px;left: 16px;font-size: 18px;
}img { width: 100%;height: auto;opacity: 0.3;
}</style>
</head>
<body><h2>图片文本</h2>
<p>在图片左上角添加文本信息:</p><div class="container"><img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"><div class="topleft">左上角</div>
</div></body>

12.5 卡片式图片

实例：

<style>body {margin:25px;}div.polaroid {width: 80%;background-color: white;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);margin-bottom: 25px;
}div.container {text-align: center;padding: 10px 20px;
}</style>
</head>
<body><h2>响应式卡片</h2><div class="polaroid"><img src="rock600x400.jpg" alt="Norway" style="width:100%"><div class="container"><p>The Troll's tongue in Hardanger, Norway</p></div>
</div><div class="polaroid"><img src="lights600x400.jpg" alt="Norway" style="width:100%"><div class="container"><p>Northern Lights in Norway</p></div>
</div></body>


12.6 图片滤镜

CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

修改所有图片的颜色为黑白 (100% 灰度)-实例：

<style>img {width: 33%;height: auto;float: left; max-width: 235px;
}.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}</style>
</head>
<body><p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p><img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300"></body>

12.7 响应式图片相册

实例：

<style>div.img {border: 1px solid #ccc;
}div.img:hover {border: 1px solid #777;
}div.img img {width: 100%;height: auto;
}div.desc {padding: 15px;text-align: center;
}* {box-sizing: border-box;
}.responsive {padding: 0 6px;float: left;width: 24.99999%;
}@media only screen and (max-width: 700px){.responsive {width: 49.99999%;margin: 6px 0;}
}@media only screen and (max-width: 500px){.responsive {width: 100%;}
}.clearfix:after {content: "";display: table;clear: both;
}</style>
</head>
<body><h2 style="text-align:center">响应式图片相册</h2><div class="responsive"><div class="img"><a target="_blank" href="img_fjords.jpg"><img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"></a><div class="desc">Add a description of the image here</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="img_forest.jpg"><img src="http://www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400"></a><div class="desc">Add a description of the image here</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="img_lights.jpg"><img src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400"></a><div class="desc">Add a description of the image here</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="img_mountains.jpg"><img src="http://www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400"></a><div class="desc">Add a description of the image here</div></div>
</div><div class="clearfix"></div><div style="padding:6px;"><h4>重置浏览器大小查看效果</h4>
</div></body>

12.8 图片 Modal(模态)

本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。

首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。

然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：

<style>#myImg {border-radius: 5px;cursor: pointer;transition: 0.3s;
}#myImg:hover {opacity: 0.7;}/* The Modal (background) */
.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 1; /* Sit on top */padding-top: 100px; /* Location of the box */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}/* Modal Content (image) */
.modal-content {margin: auto;display: block;width: 80%;max-width: 700px;
}/* Caption of Modal Image */
#caption {margin: auto;display: block;width: 80%;max-width: 700px;text-align: center;color: #ccc;padding: 10px 0;height: 150px;
}/* Add Animation */
.modal-content, #caption {    -webkit-animation-name: zoom;-webkit-animation-duration: 0.6s;animation-name: zoom;animation-duration: 0.6s;
}@-webkit-keyframes zoom {from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)}
}@keyframes zoom {from {transform: scale(0.1)} to {transform: scale(1)}
}/* The Close Button */
.close {position: absolute;top: 15px;right: 35px;color: #f1f1f1;font-size: 40px;font-weight: bold;transition: 0.3s;
}.close:hover,
.close:focus {color: #bbb;text-decoration: none;cursor: pointer;
}/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){.modal-content {width: 100%;}
}</style>
</head>
<body><h2>图片模态框</h2>
<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p><p>
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<p>
<p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p>
<img id="myImg" src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200"><!-- The Modal -->
<div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div>
</div><script>// 获取模态窗口
var modal = document.getElementById('myModal');// 获取图片模态框，alt 属性作为图片弹出中文本描述
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){modal.style.display = "block";modalImg.src = this.src;modalImg.alt = this.alt;captionText.innerHTML = this.alt;
}// 获取 <span> 元素，设置关闭模态框按钮
var span = document.getElementsByClassName("close")[0];// 点击 <span> 元素上的 (x), 关闭模态框
span.onclick = function() { modal.style.display = "none";
}</script></body>

13.CSS3 按钮

13.1 基本按钮样式

实例：

<style>.button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;
}</style>
</head>
<body><h2>CSS 按钮</h2><button>默认按钮</button>
<a href="#" class="button">链接按钮</a>
<button class="button">按钮</button>
<input type="button" class="button" value="输入框按钮"></body>

13.2 按钮颜色

我们可以使用 background-color 属性来设置按钮颜色

实例：

<style>.button {background-color: #4CAF50; /* 绿色 */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;
}.button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 红色 */
.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */
.button5 {background-color: #555555;} /* 黑色 */</style>
</head>
<body><h2>按钮颜色</h2>
<p>我们可以使用 background-color 属性来设置按钮颜色:</p><button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button></body>

13.3 按钮大小

我们可以使用 font-size 属性来设置按钮大小

实例：

<style>.button {background-color: #4CAF50; /* Green */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;
}.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}</style>
</head>
<body><h2>按钮大小</h2>
<p>我们可以使用 font-size 属性来设置按钮大小:</p><button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button></body>

13.4 圆角按钮

我们可以使用 border-radius 属性来设置圆角按钮

实例：

<style>.button {background-color: #4CAF50; /* Green */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;
}.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}</style>
</head>
<body><h2>圆角按钮</h2>
<p>我们可以使用 border-radius 属性来设置圆角按钮:</p><button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button></body>

13.5 按钮边框颜色

我们可以使用 border 属性设置按钮边框颜色

实例：

<style>.button {background-color: #4CAF50; /* Green */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;
}.button1 {background-color: white; color: black; border: 2px solid #4CAF50;
}.button2 {background-color: white; color: black; border: 2px solid #008CBA;
}.button3 {background-color: white; color: black; border: 2px solid #f44336;
}.button4 {background-color: white;color: black;border: 2px solid #e7e7e7;
}.button5 {background-color: white;color: black;border: 2px solid #555555;
}</style>
</head>
<body><h2>按钮边框颜色</h2>
<p>我们可以使用 border 属性设置按钮边框颜色:</p><button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button></body>

13.6 鼠标悬停按钮

我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

提示: 我们可以使用 transition-duration 属性来设置 “hover” 效果的速度

实例：

<style>.button {background-color: #4CAF50; /* Green */border: none;color: white;padding: 16px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;cursor: pointer;
}.button1 {background-color: white; color: black; border: 2px solid #4CAF50;
}.button1:hover {background-color: #4CAF50;color: white;
}.button2 {background-color: white; color: black; border: 2px solid #008CBA;
}.button2:hover {background-color: #008CBA;color: white;
}.button3 {background-color: white; color: black; border: 2px solid #f44336;
}.button3:hover {background-color: #f44336;color: white;
}.button4 {background-color: white;color: black;border: 2px solid #e7e7e7;
}.button4:hover {background-color: #e7e7e7;}.button5 {background-color: white;color: black;border: 2px solid #555555;
}.button5:hover {background-color: #555555;color: white;
}</style>
</head>
<body><h2>鼠标悬停按钮</h2>
<p>我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。</p>
<p><strong>提示:</strong> 我们可以使用 <code>transition-duration</code> 属性来设置 "hover" 效果的速度:</p><button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button></body>

13.7 按钮阴影

我们可以使用 box-shadow 属性来为按钮添加阴影

实例：

<style>.button {background-color: #4CAF50; /* Green */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;
}.button1 {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}.button2:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}</style>
</head>
<body><h2>按钮阴影</h2>
<p>我们可以使用 box-shadow 属性来为按钮添加阴影:</p><button class="button button1">阴影按钮</button>
<button class="button button2">鼠标悬停后出现阴影</button></body>

13.8 禁用按钮

我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 “disabled” 属性效果)。

提示: 我们可以添加 cursor 属性并设置为 “not-allowed” 来设置一个禁用的图片

实例：

<style>.button {background-color: #4CAF50; /* Green */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;
}.disabled {opacity: 0.6;cursor: not-allowed;
}</style>
</head>
<body><h2>禁用按钮</h2>
<p>我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。</p><button class="button">正常按钮</button>
<button class="button disabled">禁用按钮</button></body>

13.9 按钮宽度

默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度

提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。

实例：

<style>.button {background-color: #4CAF50; /* Green */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;
}.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {padding-left: 0;padding-right: 0;width: 100%;
}</style>
</head>
<body><h2>按钮宽度</h2>
<p>默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:</p>
<p><strong>提示:</strong>  如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。</p><button class="button button1">250px</button><br>
<button class="button button2">50%</button><br>
<button class="button button3">100%</button></body>

13.10 按钮组

移除外边距并添加 float:left 来设置按钮组

实例：

<style>.button {background-color: #4CAF50; /* Green */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;float: left;
}.button:hover {background-color: #3e8e41;
}</style>
</head>
<body><h2>按钮组</h2>
<p>移除外边距并添加 float:left 来设置按钮组:</p><button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button><p style="clear:both"><br>记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。</p></body>

13.11 带边框按钮组

我们可以使用 border 属性来设置带边框的按钮组

实例：

<style>.button {background-color: #4CAF50; /* Green */border: 1px solid green;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;float: left;
}.button:hover {background-color: #3e8e41;
}</style>
</head>
<body><h2>带边框按钮组</h2>
<p>创建带边框的按钮组:</p><button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button><p style="clear:both"><br>记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。</p></body>

实例2：

<style>.btn-group button {background-color: #04AA6D; /* 绿色背景 */border: 1px solid green; /* 绿色边框 */color: white; /* 白色文本 */padding: 10px 24px; /* 内边距离、 */cursor: pointer; /* 指针/手形图标 */float: left; /* 并排浮动按钮 */
}/* 清除浮动 */
.btn-group:after {content: "";clear: both;display: table;
}.btn-group button:not(:last-child) {border-right: none; /* 防止边框重叠 */
}/* 鼠标移动到按钮上的效果 */
.btn-group button:hover {background-color: #3e8e41;
}</style>
</head>
<body><h1>按钮组</h1><div class="btn-group"><button>Google</button><button>Runoob</button><button>Apple</button>
</div></body>

13.12 按钮动画

鼠标移动到按钮上后添加箭头标记-实例：

<style>.button {display: inline-block;border-radius: 4px;background-color: #f4511e;border: none;color: #FFFFFF;text-align: center;font-size: 28px;padding: 20px;width: 200px;transition: all 0.5s;cursor: pointer;margin: 5px;
}.button span {cursor: pointer;display: inline-block;position: relative;transition: 0.5s;
}.button span:after {content: '»';position: absolute;opacity: 0;top: 0;right: -20px;transition: 0.5s;
}.button:hover span {padding-right: 25px;
}.button:hover span:after {opacity: 1;right: 0;
}</style>
</head>
<body><h2>按钮动画</h2><button class="button" style="vertical-align:middle"><span>Hover </span></button></body>

点击时添加 “波纹” 效果-实例：

<style>.button {position: relative;background-color: #4CAF50;border: none;font-size: 28px;color: #FFFFFF;padding: 20px;width: 200px;text-align: center;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;text-decoration: none;overflow: hidden;cursor: pointer;
}.button:after {content: "";background: #90EE90;display: block;position: absolute;padding-top: 300%;padding-left: 350%;margin-left: -20px!important;margin-top: -120%;opacity: 0;transition: all 0.8s
}.button:active:after {padding: 0;margin: 0;opacity: 1;transition: 0s
}</style>
</head>
<body><h2>按钮动画 - 波纹效果</h2><button class="button">Click Me</button></body>

点击时添加 “压下” 效果-实例：

<style>.button {display: inline-block;padding: 15px 25px;font-size: 24px;cursor: pointer;text-align: center;   text-decoration: none;outline: none;color: #fff;background-color: #4CAF50;border: none;border-radius: 15px;box-shadow: 0 9px #999;
}.button:hover {background-color: #3e8e41}.button:active {background-color: #3e8e41;box-shadow: 0 5px #666;transform: translateY(4px);
}</style>
</head>
<body><h2>按钮动画 - "按压效果"</h2><button class="button">Click Me</button></body>

14.CSS3 分页

14.1 简单分页

如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。

实例：

<style>ul.pagination {display: inline-block;padding: 0;margin: 0;
}ul.pagination li {display: inline;}ul.pagination li a {color: black;float: left;padding: 8px 16px;text-decoration: none;
}</style>
</head>
<body><h2>简单的分页</h2>
<ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li>
</ul></body>

14.2 点击及鼠标悬停分页样式

如果点击当前页，可以使用 .active 来设置当前页样式，鼠标悬停可以使用 :hover 选择器来修改样式

实例：

<style>ul.pagination {display: inline-block;padding: 0;margin: 0;
}ul.pagination li {display: inline;}ul.pagination li a {color: black;float: left;padding: 8px 16px;text-decoration: none;
}ul.pagination li a.active {background-color: #4CAF50;color: white;
}ul.pagination li a:hover:not(.active) {background-color: #ddd;}</style>
</head>
<body><h2>点击及鼠标悬停分页样式</h2>
<p>移动鼠标的分页的数字上。</p>
<ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li>
</ul></body>

14.2.1 圆角样式

可以使用 border-radius 属性为选中的页码来添加圆角样式

实例：

<style>ul.pagination {display: inline-block;padding: 0;margin: 0;
}ul.pagination li {display: inline;}ul.pagination li a {color: black;float: left;padding: 8px 16px;text-decoration: none;border-radius: 5px;
}ul.pagination li a.active {background-color: #4CAF50;color: white;border-radius: 5px;
}ul.pagination li a:hover:not(.active) {background-color: #ddd;}</style>
</head>
<body><h2>圆角样式</h2>
<ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li>
</ul></body>

14.2.2 鼠标悬停过渡效果

我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果

实例：

<style>ul.pagination {display: inline-block;padding: 0;margin: 0;
}ul.pagination li {display: inline;}ul.pagination li a {color: black;float: left;padding: 8px 16px;text-decoration: none;transition: background-color .3s;
}ul.pagination li a.active {background-color: #4CAF50;color: white;
}ul.pagination li a:hover:not(.active) {background-color: #ddd;}</style>
</head>
<body><h2>鼠标悬停过渡效果</h2>
<p>鼠标移动到分页码上。</p>
<ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li>
</ul></body>

14.3 带边框分页

我们可以使用 border 属性来添加带边框分页

实例：

<style>ul.pagination {display: inline-block;padding: 0;margin: 0;
}ul.pagination li {display: inline;}ul.pagination li a {color: black;float: left;padding: 8px 16px;text-decoration: none;transition: background-color .3s;border: 1px solid #ddd;
}ul.pagination li a.active {background-color: #4CAF50;color: white;border: 1px solid #4CAF50;
}ul.pagination li a:hover:not(.active) {background-color: #ddd;}</style>
</head>
<body><h2>带边框分页</h2>
<ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li>
</ul></body>

14.3.1 圆角边框

提示: 在第一个分页链接和最后一个分页链接添加圆角

实例：

<style>ul.pagination {display: inline-block;padding: 0;margin: 0;
}ul.pagination li {display: inline;}ul.pagination li a {color: black;float: left;padding: 8px 16px;text-decoration: none;transition: background-color .3s;border: 1px solid #ddd;
}.pagination li:first-child a {border-top-left-radius: 5px;border-bottom-left-radius: 5px;
}.pagination li:last-child a {border-top-right-radius: 5px;border-bottom-right-radius: 5px;
}ul.pagination li a.active {background-color: #4CAF50;color: white;border: 1px solid #4CAF50;
}ul.pagination li a:hover:not(.active) {background-color: #ddd;}</style>
</head>
<body><h2>圆角边框</h2>
<ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li>
</ul></body>

14.3.2 分页间隔

提示: 你可以使用 margin 属性来为每个页码直接添加空格

实例：

<style>ul.pagination {display: inline-block;padding: 0;margin: 0;
}ul.pagination li {display: inline;}ul.pagination li a {color: black;float: left;padding: 8px 16px;text-decoration: none;transition: background-color .3s;border: 1px solid #ddd;margin: 0 4px;
}ul.pagination li a.active {background-color: #4CAF50;color: white;border: 1px solid #4CAF50;
}ul.pagination li a:hover:not(.active) {background-color: #ddd;}</style>
</head>
<body><h2>分页间隔</h2>
<ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li>
</ul></body>

14.4 分页字体大小

我们可以使用 font-size 属性来设置分页的字体大小

实例：

<style>ul.pagination {display: inline-block;padding: 0;margin: 0;
}ul.pagination li {display: inline;}ul.pagination li a {color: black;float: left;padding: 8px 16px;text-decoration: none;transition: background-color .3s;border: 1px solid #ddd;font-size: 22px;
}ul.pagination li a.active {background-color: #4CAF50;color: white;border: 1px solid #4CAF50;
}ul.pagination li a:hover:not(.active) {background-color: #ddd;}</style>
</head>
<body><h2>分页字体大小</h2>
<p>我们可以使用 font-size 属性来设置分页的字体大小:</p>
<ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li>
</ul></body>

14.5 居中分页

如果要让分页居中，可以在容器元素上 (如 < div>) 添加 text-align:center 样式

实例：

<style>ul.pagination {display: inline-block;padding: 0;margin: 0;
}ul.pagination li {display: inline;}ul.pagination li a {color: black;float: left;padding: 8px 16px;text-decoration: none;transition: background-color .3s;border: 1px solid #ddd;
}ul.pagination li a.active {background-color: #4CAF50;color: white;border: 1px solid #4CAF50;
}ul.pagination li a:hover:not(.active) {background-color: #ddd;}div.center {text-align: center;}</style>
</head>
<body><h2>分页居中</h2><div class="center"><ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li></ul>
</div></body>

其他实例：

<style>ul.pagination {display: inline-block;padding: 0;margin: 0;
}ul.pagination li {display: inline;}ul.pagination li a {color: black;float: left;padding: 8px 16px;text-decoration: none;transition: background-color .3s;border: 1px solid #ddd;font-size: 18px;
}ul.pagination li a.active {background-color: #eee;color: black;border: 1px solid #ddd;
}ul.pagination li a:hover:not(.active) {background-color: #ddd;}</style>
</head>
<body><p>上一页，下一页按钮:</p>
<ul class="pagination"><li><a href="#">❮</a></li><li><a href="#">❯</a></li>
</ul><p>分页导航:</p>
<ul class="pagination"><li><a href="#" class="active">Home</a></li><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li>
</ul></body>

14.6 面包屑导航

实例：

<style>ul.breadcrumb {padding: 8px 16px;list-style: none;background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {padding: 8px;color: black;content: "/\00a0";
}
ul.breadcrumb li a {color: green;}</style>
</head>
<body><h2>面包屑导航</h2>
<ul class="breadcrumb"><li><a href="#">首页 </a></li><li><a href="#">前端 </a></li><li><a href="#">HTML 教程 </a></li><li>HTML 段落</li>
</ul></body>

15.CSS3 框大小

CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

15.1 浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

15.2 不使用 CSS3 box-sizing 属性

默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。


以上两个 < div> 元素虽然宽度与高度设置一样，但真实展示的大小不一致，因为 div2 指定了内边距

实例：

<style>.div1 {width: 300px;height: 100px;border: 1px solid blue;
}.div2 {width: 300px;height: 100px;    padding: 50px;border: 1px solid red;
}</style>
</head>
<body><div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div></body>

使用这种方式如果想要获得较小的那个框且包含内边距，就不得不考虑到边框和内边距的宽度。

CSS3 的 box-sizing 属性很好的解决了这个问题。

15.3 使用 CSS3 box-sizing 属性

CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中

以下是两个 < div> 元素添加 box-sizing: border-box; 属性的简单实例：

<style>.div1 {width: 300px;height: 100px;border: 1px solid blue;box-sizing: border-box;
}.div2 {width: 300px;height: 100px;    padding: 50px;border: 1px solid red;box-sizing: border-box;
}</style>
</head>
<body><div class="div1">两个 div 现在是一样大小的!</div>
<br>
<div class="div2">css教程!</div></body>


从结果上看 box-sizing: border-box; 效果更好，也正是很多开发人员需要的效果。

以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box; (但是并非所有 - 这就是为什么 input 和 text 元素设置了 width: 100%; 后的宽度却不一样)。

所有元素使用 box-sizing 是比较推荐的：

<style>* {box-sizing: border-box;
} input, textarea {width: 100%;
}</style>
</head>
<body><form action="action_page.php">
用户名:<br>
<input type="text" name="username" value="runoob"><br>
邮箱:<br>
<input type="text" name="email" value="429240967@qq.com"><br>
评论:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="提交">
</form> <p><strong>提示：</strong> 可以尝试移除样式中的 box-sizing 属性，看看会发生什么。注意移除后部分浏览器 input, textarea, 和 submit 按钮的宽度不一致。</p></body>

16.CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

16.1 浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

16.2 CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右-实例：

<style>.flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

当然我们可以修改排列方式。

如果我们设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变-实例：

<style>body {direction: rtl;
}.flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

16.3 flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

语法：

flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有:

  • row：横向从左到右排列（左对齐），默认的排列方式。
  • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  • column：纵向排列。
  • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

row-reverse 的实例：

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-flex-direction: row-reverse;flex-direction: row-reverse;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

column 的实例：

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-flex-direction: column;flex-direction: column;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

column-reverse的实例：

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-flex-direction: column-reverse;flex-direction: column-reverse;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

16.4 justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：

justify-content: flex-start | flex-end | center | space-between | space-around

各个值解析:

  • flex-start：
    弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

  • flex-end：
    弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

  • center：
    弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

  • space-between：
    弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

  • space-around：
    弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

效果图展示：

flex-end的实例：

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-justify-content: flex-end;justify-content: flex-end;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

center的实例：

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

space-between 的实例：

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

space-around 的实例：

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-justify-content: space-around;justify-content: space-around;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

16.5 align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法：

align-items: flex-start | flex-end | center | baseline | stretch

各个值解析:

  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

以下实例演示了 stretch(默认值) 的使用:

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-align-items: stretch;align-items: stretch;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

以下实例演示了 flex-start 的使用:

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-align-items: flex-start;align-items: flex-start;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

以下实例演示了 flex-end 的使用:

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-align-items: flex-end;align-items: flex-end;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

以下实例演示了 center 的使用:

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

以下实例演示了 baseline 的使用:

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-align-items: baseline;align-items: baseline;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

16.6 flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各个值解析:

  • nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
  • wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
  • wrap-reverse -反转 wrap 排列。

以下实例演示了 nowrap 的使用:

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-flex-wrap: nowrap;flex-wrap: nowrap;width: 300px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

以下实例演示了 wrap 的使用:

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;width: 300px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

以下实例演示了 wrap-reverse 的使用:

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap-reverse;flex-wrap: wrap-reverse;width: 300px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

16.7 align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法：

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各个值解析:

  • stretch - 默认。各行将会伸展以占用剩余的空间。
  • flex-start - 各行向弹性盒容器的起始位置堆叠。
  • flex-end - 各行向弹性盒容器的结束位置堆叠。
  • center -各行向弹性盒容器的中间位置堆叠。
  • space-between -各行在弹性盒容器中平均分布。
  • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

以下实例演示了 center 的使用:

<style>.flex-container {display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-align-content: center;align-content: center;width: 300px;height: 300px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

16.8 弹性子元素属性

16.8.1 排序

语法：

order:

各个值解析:

  • < integer >：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

order 属性设置弹性容器内弹性子元素的属性-实例：

<style>.flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}.first {-webkit-order: -1;order: -1;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item first">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

16.8.2 对齐

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

以下实例在第一个弹性子元素上设置了 margin-right: auto; 。 它将剩余的空间放置在元素的右侧：

<style>.flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 75px;height: 75px;margin: 10px;
}.flex-item:first-child {margin-right: auto;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>

16.8.3 完美的居中

以下实例将完美解决我们平时碰到的居中问题。

使用弹性盒子，居中变的很简单，只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:

<style>.flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 75px;height: 75px;margin: auto;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item">Perfect centering!</div>
</div></body>

16.8.4 align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法：

align-self: auto | flex-start | flex-end | center | baseline | stretch

各个值解析:

  • auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

以下实例演示了弹性子元素上 align-self 不同值的应用效果：

<style>.flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 60px;min-height: 100px;margin: 10px;
}.item1 {-webkit-align-self: flex-start;align-self: flex-start;
}
.item2 {-webkit-align-self: flex-end;align-self: flex-end;
}.item3 {-webkit-align-self: center;align-self: center;
}.item4 {-webkit-align-self: baseline;align-self: baseline;
}.item5 {-webkit-align-self: stretch;align-self: stretch;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item item1">flex-start</div><div class="flex-item item2">flex-end</div><div class="flex-item item3">center</div><div class="flex-item item4">baseline</div><div class="flex-item item5">stretch</div>
</div></body>

16.8.5 flex

flex 属性用于指定弹性子元素如何分配空间。

语法：

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

各个值解析:

  • auto: 计算值为 1 1 auto
  • initial: 计算值为 0 1 auto
  • none：计算值为 0 0 auto
  • inherit：从父元素继承
  • [ flex-grow ]：定义弹性盒子元素的扩展比率。
  • [ flex-shrink ]：定义弹性盒子元素的收缩比率。
  • [ flex-basis ]：定义弹性盒子元素的默认基准值。

以下实例中，第一个弹性子元素占用了 2/4 的空间，其他两个各占 1/4 的空间:

<style>.flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;margin: 10px;
}.item1 {-webkit-flex: 2;flex: 2;
}.item2 {-webkit-flex: 1;flex: 1;
}.item3 {-webkit-flex: 1;flex: 1;
}</style>
</head>
<body><div class="flex-container"><div class="flex-item item1">flex item 1</div><div class="flex-item item2">flex item 2</div><div class="flex-item item3">flex item 3</div>
</div></body>

16.9 CSS3 弹性盒子属性

下表列出了在弹性盒子中常用到的属性:

属性 描述
display 指定 HTML 元素盒子类型。
flex-direction 指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow flex-direction 和 flex-wrap 的简写
order 设置弹性盒子的子元素排列顺序。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
flex 设置弹性盒子的子元素如何分配空间。

17.CSS3 多媒体查询

17.1 CSS2 多媒体类型

@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。

例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。

但是这些多媒体类型在很多设备上支持还不够友好。

17.2 CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

  • viewport(视窗) 的宽度与高度
  • 设备的宽度与高度
  • 朝向 (智能手机横屏，竖屏) 。
  • 分辨率

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

17.3 浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

17.4 多媒体查询语法

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {CSS 代码...;
}

如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

  • not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

  • only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

  • all: 所有设备，这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

17.5 CSS3 多媒体类型

值 描述
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等。
speech 用于屏幕阅读器

17.6 多媒体查询简单实例

使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

以下实例中在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色:

<style>body {background-color: pink;
}@media screen and (max-width: 480px) {body {background-color: lightgreen;}
}</style>
</head>
<body><h1>重置浏览器窗口查看效果！</h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p></body>

以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：

<style>.wrapper {overflow:auto;}#main {margin-left: 4px;}
#leftsidebar {float: none;width: auto;}
#menulist {margin:0;padding:0;}.menuitem {background:#CDF0F6;border:1px solid #d4d4d4;border-radius:4px;list-style-type:none;margin:4px;padding:2px;
}@media screen and (min-width: 480px) {#leftsidebar {width:200px;float:left;}#main {margin-left:216px;}
}</style>
</head>
<body><div class="wrapper"><div id="leftsidebar"><ul id="menulist"><li class="menuitem">Menu-item 1</li><li class="menuitem">Menu-item 2</li><li class="menuitem">Menu-item 3</li><li class="menuitem">Menu-item 4</li><li class="menuitem">Menu-item 5</li></ul></div><div id="main"><h1>重置浏览器窗口查看效果！</h1><p>在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧。</p></div>
</div></body>

以下实例在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏：

<style>div.example {background-color: yellow;padding: 20px;
}@media screen and (max-width: 600px) {div.example {display: none;}
}</style>
</head>
<body><h2>屏幕可视尺寸小于 600 px 时，隐藏以下元素。</h2><div class="example">我是会隐藏的元素。</div><p>重置浏览器大小，查看效果。</p></body>

17.7 CSS3 多媒体查询实例

开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下：

<style>ul {list-style-type: none;
}ul li a {color: green;text-decoration: none;padding: 3px; display: block;
}</style>
</head>
<body><ul><li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li><li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li><li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul></body>


注意 data-email 属性。在 HTML 中我们可以使用带 data- 前缀的属性来存储信息。

17.7.1 520 到 699px 宽度 - 添加邮箱图标

当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标：

<style>ul {list-style-type: none;
}ul li a {color: green;text-decoration: none;padding: 3px; display: block;
}@media screen and (max-width: 699px) and (min-width: 520px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}
}</style>
</head>
<body><h1>重置浏览器窗口，查看效果!</h1><ul><li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li><li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li><li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul></body>

17.7.2 700 到 1000px - 添加文本前缀信息

当浏览器的宽度在 700 到 1000px, 会在邮箱链接前添加 "Email: ":

<style>ul {list-style-type: none;
}ul li a {color: green;text-decoration: none;padding: 3px; display: block;
}@media screen and (max-width: 699px) and (min-width: 520px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}
}@media screen and (max-width: 1000px) and (min-width: 700px) {ul li a:before {content: "Email: ";font-style: italic;color: #666666;}
}</style>
</head>
<body><h1>重置浏览器窗口，查看效果!</h1><ul><li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li><li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li><li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul></body>

17.7.3 大于 1001px 宽度 - 添加邮件地址

当浏览器的宽度大于 1001px 时，会在链接后添加邮件地址接。

我们会使用 data- 属性来为每个人名后添加邮件地址：

<style>ul {list-style-type: none;
}ul li a {color: green;text-decoration: none;padding: 3px; display: block;
}@media screen and (max-width: 699px) and (min-width: 520px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}
}@media screen and (max-width: 1000px) and (min-width: 700px) {ul li a:before {content: "Email: ";font-style: italic;color: #666666;}
}@media screen and (min-width: 1001px) {ul li a:after {content: " (" attr(data-email) ")";font-size: 12px;font-style: italic;color: #666666;}
}</style>
</head>
<body><h1>重置浏览器窗口，查看效果!</h1><ul><li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li><li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li><li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul></body>

17.7.4 大于 1151px 宽度 - 添加图标

当浏览器的宽度大于 1001px 时，会在人名前添加图标。

实例中，我们没有编写额外的查询块，我们可以在已有的查询媒体后使用逗号分隔来添加其他媒体查询 (类似 OR 操作符):

<style>ul {list-style-type: none;
}ul li a {color: green;text-decoration: none;padding: 3px; display: block;
}@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}
}@media screen and (max-width: 1000px) and (min-width: 700px) {ul li a:before {content: "Email: ";font-style: italic;color: #666666;}
}@media screen and (min-width: 1001px) {ul li a:after {content: " (" attr(data-email) ")";font-size: 12px;font-style: italic;color: #666666;}
}</style>
</head>
<body><h1>重置浏览器窗口，查看效果!</h1><ul><li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li><li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li><li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul></body>

web前端之CSS3相关推荐

  1. html隐藏元素的方式,Web前端：CSS3——3种隐藏元素方法的区别

    原标题:Web前端:CSS3--3种隐藏元素方法的区别 Web前端教程 CSS3规范的一个新特点是被分为若干个相互独立的模块.一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的内容,这些 ...

  2. 好程序员web前端分享CSS3边框

    好程序员web前端分享CSS3 边框,通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop. 在本章中,您将学到以下边框属性: b ...

  3. 尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p1-p8】

    尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇 尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p1(22:55) 一.软件的分类: 1.系统软件 -wind ...

  4. 小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表

    前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...

  5. Web前端html5+css3前端开发入门学习笔记

    文章目录 前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...

  6. 好程序员web前端分享CSS3实现全景图特效

    本篇文章好程序员web前端将给大家带来一个css3的黑-科技:如何仅仅使用css来实现全景图的效果? 首先定义一些基本的样式和动画 .panorama { width: 300px; height: ...

  7. web前端html5+css3学习笔记(1)

    开启我的第一篇博客~~~ 记录学习html+css的笔记 目录 一.认识两位先驱 二.计算机的组成 1.硬件 2.软件 三.浏览器与内核 四.网页标准 五.HTML历史* 一.认识两位先驱 图灵:人工 ...

  8. web前端（css3）

    文章目录 前言 2.css优先级以及特性 3.css选择器 4.伪类和伪元素: 5.字体属性 6.文本属性 7.css基础理论 7.背景属性 8.边框属性 9.盒子模型 10.列表,表格,鼠标,滤镜 ...

  9. web前端+HTML5+CSS3学习笔记

    文章目录 HTML认知 网页的基本组成和本质 HTML初始概念 HTML标签学习 HTML基础 列表 表格 表单 语义化标签 字符实体 CSS基础 基础认知 选择器 文字字体 Emmet语法 CSS进 ...

最新文章

  1. 大数据运行环境的运行
  2. C 指针的有意思的描述
  3. Trie的C++实现及HDU1251,hdu1671
  4. OPW-00001: Unable to open password-file
  5. JDK源码解析之 java.lang.Error
  6. 在JScript中运行应用程序
  7. 如何在Java中执行Python模块？从认识JEP库开始
  8. MIUI9修改手机机型 修改王者荣耀版本
  9. 幻读Java_关于幻读 - hellopretty - 博客园
  10. 远程桌面由于以下原因无法连接远程计算机,win10远程桌面提示由于以下原因之一无法连接的解决教程...
  11. Tracup｜使用项目管理软件帮助战胜拖延症
  12. 网站实时监控系统的设计与实现
  13. asus pc server + geforce titan xp + centos 7
  14. 并发请求：统计数据收集模式
  15. 跨境电商战略发展中，流星汇聚分析未来跨境电商发展趋势
  16. 语音信号的梅尔频率倒谱系数(MFCC)的原理讲解及python实现
  17. eigen冲突 sophus 安装_svo_edgelet
  18. 主存/内存/外存 区分
  19. 数独 ( 二 ) ——生成数独终局
  20. Error creating bean with name ‘ribbonLoadBalancingHttpClient‘

热门文章

  1. Accumulator累加器（一）
  2. 第一次上计算机课心得,第一次上微机课作文4篇
  3. shell运行python
  4. 解决用户“sa“登录失败。该用户与可信 sql server 连接无关联。
  5. 矩阵的初等变换的应用
  6. Kafka 生产者、消费者命令行操作
  7. 2022年深圳技能大赛-大数据技术应用职业技能竞赛介绍
  8. 开机后黑屏看不到桌面_电脑开机后桌面黑屏不显示怎么办
  9. 深入Windows开发--Preview and Thumbnail
  10. 一文读懂MCU的技术原理、区别及发展历史