简介

CSS3 已完全向后兼容，所以你就不必改变现有的设计。

CSS3 被拆分为”模块”。旧规范已拆分成小块，还增加了新的。一些最重要 CSS3 模块如下：

  • 选择器
  • 盒模型
  • 背景和边框
  • 文字特效
  • 2D/3D转换
  • 动画
  • 多列布局
  • 用户界面

边框

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

在本章中，您将了解以下的边框属性：

  • border-radius
  • box-shadow
  • border-image

CSS3 圆角

1
border-radius:25px;

CSS3 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影:

1
2
3
4
div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3 边界图片

有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：

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

在 div 中使用图片创建边框:

注意:  Internet Explorer 不支持 border-image 属性。

1
2
3
<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
div {
    border: 15px solid transparent;
    width: 250px;
    padding: 10px 20px;
}

#round {
    -webkit-border-image: url('https://www.runoob.com/images/border.png') 30 30 round;
    /* Safari 5 and older */
    -o-border-image: url('https://www.runoob.com/images/border.png') 30 30 round;
    /* Opera */
    border-image: url('https://www.runoob.com/images/border.png') 30 30 round;
}

#stretch {
    -webkit-border-image: url('https://www.runoob.com/images/border.png') 30 30 stretch;
    /* Safari 5 and older */
    -o-border-image: url('https://www.runoob.com/images/border.png') 30 30 stretch;
    /* Opera */
    border-image: url('https://www.runoob.com/images/border.png') 30 30 stretch;
}
这里，图像平铺（重复）来填充该区域。
这里，图像被拉伸以填充该区域。

背景

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

在本章您将了解以下背景属性：

  • background-image
  • background-size
  • background-origin
  • background-clip

CSS3 background-image属性

1
2
3
4
5
6
7
#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
  /*控制两张图片背景，一对一对应*/
  /*repeat是重复叠加*/
}

CSS3 background-size 属性

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

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

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

1
2
3
4
5
6
div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

CSS3 的 background-origin 属性

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

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

CSS3 多个背景图像

1
2
3
4
body
{ 
    background-image:url(img_flwr.gif),url(img_tree.gif);
}

CSS3 background-clip属性

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

1
2
3
4
5
6
#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
}

渐变

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

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

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

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

线性渐变相关属性：background-image。

CSS3 线性渐变

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

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

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

线性渐变 - 从左到右

1
2
3
4
#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

线性渐变 - 对角

1
2
3
4
#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

线性渐变 - 使用角度

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

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

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

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

CSS3 径向渐变

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

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

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

文本效果

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

在本章中您将了解以下文本属性：

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

CSS3 的文本阴影

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

1
2
3
4
h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

CSS3 box-shadow属性

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

1
2
3
div {
    box-shadow: 10px 10px 5px #888888;
}

2D 转换

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

在本章您将了解2D变换方法：

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

translate() 方法

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

1
2
3
4
5
6
7
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
/*translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。*/

rotate() 方法

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

1
2
3
4
5
6
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

scale() 方法

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

1
2
3
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

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

动画

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

SimpleLife

CSS3 动画

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

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

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

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

1
2
3
4
5
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

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

1
2
3
4
5
6
7
8
9
10
11
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

CSS3动画是什么？

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

多列

我们将学习以下几个 CSS3 的多列属性:

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

CSS3 创建多列

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

以下实例将

元素中的文本分为 3 列：

1
2
3
4
5
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

CSS3 多列中列与列间的间隙

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

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

用户界面

CSS3 用户界面

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

在本章中，您将了解以下的用户界面属性：

  • resize
  • box-sizing
  • outline-offset

CSS3 调整尺寸(Resizing)

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

1
2
3
4
5
div
{
    resize:both;
    overflow:auto;
}

图片

缩略图

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

1
2
3
4
5
6
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}
<img src="paris.jpg" alt="Paris">

响应式图片

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

实例中，你可以通过重置浏览器大小查看效果:

1
2
3
4
img {
    max-width: 100%;
    height: auto;
}

弹性盒子

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

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

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

CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

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

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:

flex-direction

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

语法：

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

flex-direction的值有:

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

justify-content 属性

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

justify-content 语法如下：

1
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）。

align-items 属性

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

语法：**

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

各个值解析: 控制item上下

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

flex-wrap 属性

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

语法:

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

各个值解析:

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

align-content 属性

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

语法:

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

各个值解析:

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

多媒体查询

CSS3 多媒体查

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

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

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

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

多媒体查询语法

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

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

补充CSS

伪类

anchor伪类

1
2
3
4
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

伪元素

CSS - :before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。

CSS - :after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。

Position

值 描述
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit 规定应该从父元素继承 position 属性的值。
initial 设置该属性为默认值，详情查看 CSS initial 关键字。