css3新版

最新推荐文章于 2022-12-20 16:53:19 发布

real_fxyyyyyy

最新推荐文章于 2022-12-20 16:53:19 发布

阅读量249

点赞数

文章标签： java css

本文链接：https://blog.csdn.net/real_fxy/article/details/125036633

版权

typora-root-url: pic

CSS3

一、CSS 圆角

1、CSS圆角

通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。

2、CSS border-radius 属性

CSS border-radius 属性定义元素角的半径。

**提示：**您可以使用此属性为元素添加圆角！

这里有三个例子：

带有指定背景颜色的元素的圆角：
带边框元素的圆角：
带有背景图像的元素的圆角：

这是代码：

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

**提示：**border-radius 属性实际上是以下属性的简写属性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

3、CSS border-radius - 指定每个角

border-radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：

三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：

两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：

一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）：

这是代码：

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

您还可以创建椭圆角：

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

4、CSS 圆角属性

属性	描述
border-radius	用于设置所有四个 border---radius 属性的简写属性。
border-top-left-radius	定义左上角边框的形状。
border-top-right-radius	定义右上角边框的形状。
border-bottom-right-radius	定义右下角边框的形状。
border-bottom-left-radius	定义左下角边框的形状。

二、CSS 边框图像

1、CSS 边框图像

通过使用 CSS border-image 属性，可以设置图像用作围绕元素的边框。

2、CSS border-image 属性

CSS border-image 属性允许您指定要使用的图像，而不是包围普通边框。

该属性有三部分：

用作边框的图像
在哪里裁切图像
定义中间部分应重复还是拉伸

我们将使用这幅图像（“border.png”）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aBVlS4zC-1653830605837)(/border.png)]

**注意：**为了使 border-image 起作用，该元素还需要设置 border 属性！

此处，重复图像的中间部分以创建边框：

这是代码：

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

此处，图像的中间部分被拉伸以创建边框：

这是代码：

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

**提示：**border-image 属性实际上是以下属性的简写属性：

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

3、CSS border-image - 不同的裁切值

不同的裁切值会完全改变边框的外观：

实例 1：

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

实例 2：

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

实例 3：

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

4、CSS 边框图像属性

属性	描述
border-image	用于设置所有 border-image-* 属性的简写属性。
border-image-source	规定用作边框的图像的路径。
border-image-slice	规定如何裁切边框图像。
border-image-width	规定边框图像的宽度。
border-image-outset	规定边框图像区域超出边框盒的量。
border-image-repeat	规定边框图像应重复、圆角、还是拉伸。

三、CSS 背景

1、CSS 多重背景

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）：

实例:

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

多重背景图像可以使用单独的背景属性（如上所述）或 background 简写属性来指定。

下面的例子使用 background 简写属性（结果与上例相同）：

实例:

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

2、CSS 背景尺寸

CSS background-size 属性允许您指定背景图像的大小。

可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。

下面的例子将背景图像的大小调整为比原始图像小得多（使用像素）：

这是代码：

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

background-size 的其他两个可能的值是 contain 和 cover。

contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。

cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。

下面的例子展示了 contain 和 cover 的用法：

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

3、定义多个背景图像的尺寸

在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）。

下面的例子指定了三幅背景图像，每幅图像有不同的 background-size 值：

实例:

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

4、全尺寸背景图像

现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口。

具体要求如下：

用图像填充整个页面（无空白）
根据需要缩放图像
在页面上居中图像
不引发滚动条

下面的例子显示了如何实现它：使用元素（元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。最后使用 background-size 属性调整其大小：

实例:

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

5、Hero Image

您还可以在

上使用不同的背景属性来创建 Hero Image（带有文本的大图像），并将其放置在您希望的位置上。

实例:

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

6、CSS background-origin 属性

CSS background-origin 属性指定背景图像的位置。

该属性接受三个不同的值：

border-box - 背景图片从边框的左上角开始
padding-box -背景图像从内边距边缘的左上角开始（默认）
content-box - 背景图片从内容的左上角开始

下面的示例展示了 background-origin 属性：

实例:

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

7、CSS background-clip 属性

CSS background-clip 属性指定背景的绘制区域。

该属性接受三个不同的值：

border-box - 背景绘制到边框的外部边缘（默认）
padding-box - 背景绘制到内边距的外边缘
content-box - 在内容框中绘制背景

下面的例子展示了 background-clip 属性：

实例:

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

8、CSS 高级背景属性

属性	描述
background	用于在一条声明中设置所有背景属性的简写属性。
background-clip	规定背景的绘制区域。
background-image	为一个元素指定一幅或多幅背景图像。
background-origin	规定背景图像的放置位置。
background-size	规定背景图像的大小。

四、CSS 颜色

CSS 支持 140 多种颜色名称，以及十六进制值、RGB 值、RGBA 值、HSL 值、HSLA 值和不透明度。

1、RGBA 颜色

RGBA 颜色值是 RGB 颜色值的扩展，带有 alpha 通道 - 该通道规定颜色的不透明度。

RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

下面的例子定义了不同的 RGBA 颜色：

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* 带不透明度的红色 */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* 带不透明度的绿色 */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* 带不透明度的蓝色 */

2、HSL 颜色

HSL 指的是色相、饱和度和亮度（Hue、Saturation 以及 Lightness）。

HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。

色相是色轮上的度数（从 0 到 360）：

0（或 360）是红色
120 是绿色
240 是蓝色

饱和度是一个百分比值：100％是全色。

亮度也是一个百分比值：0％是深色（黑色），而 100％是白色。

下面的例子定义了不同的 HSL 颜色：

#p1 {background-color: hsl(120, 100%, 50%);}  /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}  /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}  /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}   /* 淡绿色 */

3、HSLA 颜色

HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它规定了颜色的不透明度。

HSLA 颜色值由以下参数规定：hsla(hue, saturation, lightness, alpha)，其中 alpha 参数定义不透明度。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

下面的例子定义了不同的 HSLA 颜色：

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* 带不透明度的绿色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* 带不透明度的浅绿色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* 带不透明度的深绿色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* 带不透明度的淡绿色 */

4、不透明度

CSS opacity 属性设置整个元素的不透明度（背景颜色和文本都将是不透明/透明的）。

opacity 属性值必须是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

请注意，上面的文本也将是透明/不透明的！

下面的例子显示了带有不透明度的不同元素：

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* 带不透明度的红色 */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* 带不透明度的绿色 */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* 带不透明度的蓝色 */

五、CSS 渐变

CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。

CSS 定义了两种渐变类型：

线性渐变（向下/向上/向左/向右/对角线）
径向渐变（由其中心定义）

1、CSS 线性渐变

如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

语法:

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

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

下面的例子显示了从顶部开始的线性渐变。它从红色开始，过渡到黄色：

#grad {
  background-image: linear-gradient(red, yellow);
}

线性渐变 - 从左到右

下面的例子展示了从左开始的线性渐变。它从红色开始，过渡到黄色：

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

线性渐变 - 对角线

您可以通过指定水平和垂直起始位置来实现对角渐变。

下面的例子展示了从左上角开始（到右下角）的线性渐变。它从红色开始，过渡到黄色：

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

2、使用角度

如果希望对渐变角度做更多的控制，您可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。

语法:

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

这个角度指定水平线和渐变线之间的角度。

下面的例子展示了如何在线性渐变上使用角度：

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

3、使用多个色标

下面的例子展示了带有多个色标的线性渐变（从上到下）：

#grad {
  background-image: linear-gradient(red, yellow, green);
}

下面的例子展示了如何使用彩虹色和一些文本创建线性渐变（从左到右）：

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

4、使用透明度

CSS 渐变还支持透明度，也可用于创建渐变效果。

如需添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。

下面的例子展示了从左开始的线性渐变。它开始完全透明，然后过渡为全色红色：

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

5、重复线性渐变

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

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

六、CSS 径向渐变

1、CSS 径向渐变

径向渐变由其中心定义。

如需创建径向渐变，您还必须定义至少两个色标。

语法:

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

默认地，shape 为椭圆形，size 为最远角，position 为中心。

径向渐变-均匀间隔的色标（默认）

下面的例子展示了带有均匀间隔的色标的径向渐变：

#grad {
  background-image: radial-gradient(red, yellow, green);
}

径向渐变-不同间距的色标

下面的例子展示了一个径向渐变，其色标之间的间隔不同：

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

2、设置形状

shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。

下面的例子展示了一个圆形的径向渐变：

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

3、使用大小不同的关键字

size 参数定义渐变的大小。它可接受四个值：

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

实例:

设置了不同 size 关键词的径向渐变：

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

4、重复径向渐变

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

实例:

重复的径向渐变：

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

5、CSS 渐变属性

下表列出了 CSS 渐变属性：

属性	描述
background-image	为一个元素设置一幅或多幅背景图像。

七、CSS 阴影

1、CSS 阴影效果

通过使用 CSS，您可以在文本和元素上添加阴影。

在我们的教学中，您将学习如下属性：

text-shadow
box-shadow

2、CSS 文字阴影

CSS text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

实例:

h1 {
  text-shadow: 2px 2px;
}

接下来，为阴影添加颜色：

h1 {
  text-shadow: 2px 2px red;
}

然后，向阴影添加模糊效果：

h1 {
  text-shadow: 2px 2px 5px red;
}

下面的例子展示了带有黑色阴影的白色文本：

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

下面的例子展示了红色的霓虹发光阴影：

h1 {
  text-shadow: 0 0 3px #FF0000;
}

3、多个阴影

如需在文本中添加多个阴影，您可以添加以逗号分隔的阴影列表。

下面的例子展示了红色和蓝色的霓虹灯发光阴影：

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

下面的例子展示了带有黑色、蓝色和深蓝色阴影的白色文本：

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

您还可以使用 text-shadow 属性在文本周围创建纯边框（无阴影）：

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

八、CSS box-shadow

1、CSS box-shadow 属性

CSS box-shadow 属性应用阴影于元素。

最简单的用法是只指定水平阴影和垂直阴影：

div {
  box-shadow: 10px 10px;
}

接下来，为阴影添加颜色：

div {
  box-shadow: 10px 10px grey;
}

接下来，向阴影添加模糊效果：

div {
  box-shadow: 10px 10px 5px grey;
}

2、卡片

您还可以使用 box-shadow 属性创建纸质卡片效果：

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;
}

3、CSS 阴影属性

下表列出了 CSS 的阴影属性：

属性	描述
box-shadow	向一个元素添加一个或多个阴影。
text-shadow	在文本中添加一个或多个阴影。

九、CSS 文本效果

1、CSS 文字溢出

CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。

可以被裁剪：

也可以将其呈现为省略号（…）：

代码如下：

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

下面的例子展示了将鼠标悬停在元素上时如何显示溢出的内容：

div.test:hover {
  overflow: visible;
}

2、CSS 字换行（Word Wrapping）

CSS word-wrap 属性使长文字能够被折断并换到下一行。

如果一个单词太长而无法容纳在一个区域内，它会向外扩展：

通过 word-wrap 属性，您可以强制对文本进行换行 - 即使这意味着在词中间将其拆分：

代码如下：

p {
  word-wrap: break-word;/*允许长单词被打断并换行到下一行*/
}

3、CSS 换行规则

CSS word-break 属性指定换行规则。

此行将连字符打断：

这些行将在任何字符处中断：

代码如下：

p.test1 {
  word-break: keep-all;
}

p.test2 {
  word-break: break-all;
}

4、CSS 书写模式

CSS writing-mode 属性规定文本行是水平放置还是垂直放置。

下面的例子展示了一些不同的书写模式：

p.test1 {
  writing-mode: horizontal-tb; 
}

span.test2 {
  writing-mode: vertical-rl; 
}

p.test2 {
  writing-mode: vertical-rl; 
}

5、CSS 文本效果属性

下表列出了 CSS 文本效果属性：

属性	描述
text-align-last	指定如何对齐文本的最后一行。
text-justify	指定对齐的文本应如何对齐和间隔。
text-overflow	指定应如何向用户呈现未显示的溢出内容。
word-break	指定非 CJK 脚本的换行规则。
word-wrap	允许长单词被打断并换到下一行。
writing-mode	指定文本行是水平放置还是垂直放置。

十、CSS 网络字体

1、CSS @font-face 规则

Web 字体允许 Web 设计人员使用用户计算机上未安装的字体。

当您找到/购买了想要使用的字体后，只需将字体文件包含在您的 Web 服务器上，它将在需要时自动下载给用户。

您的“自有”字体在 CSS @font-face 规则中进行定义。

2、不同的字体格式

TrueType 字体 (TTF)

TrueType 是 1980 年代后期由 Apple 和 Microsoft 开发的字体标准。 TrueType 是 Mac OS 和 Microsoft Windows 操作系统最常用的字体格式。

OpenType 字体 (OTF)

OpenType 是可缩放计算机字体的格式。它基于 TrueType 构建，并且是 Microsoft 的注册商标。今天，OpenType 字体在主要计算机平台上得到普遍使用。

Web 开放字体格式 (WOFF)

WOFF 是用于网页的字体格式。它于 2009 年开发，现已成为 W3C 的推荐标准。 WOFF 本质上是具有压缩和其他元数据的 OpenType 或 TrueType。目标是支持在有带宽限制的网络上从服务器到客户端进行字体分发。

Web 开放字体格式 (WOFF 2.0)

TrueType/OpenType 字体比 WOFF 1.0 提供更好的压缩。

SVG 字体/形状

SVG 字体允许在显示文本时将 SVG 用作字形。 SVG 1.1 规范定义了一个字体模块，该模块允许在 SVG 文档中创建字体。您还可以将 CSS 应用于 SVG 文档，同时 @font-face 规则可以应用于 SVG 文档中的文本。

嵌入式 OpenType 字体 (EOT)

EOT 字体是 Microsoft 设计的 OpenType 字体的紧凑形式，用作网页上的嵌入式字体。

3、对字体格式的浏览器支持

表格中的数字注明了完全支持该字体格式的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pkQaI0PI-1653830605838)(/image-20211123151724345.png)]

***IE：**该字体格式仅在设置为 “installable” 时有效。

***Firefox：**默认情况下不支持，但可以启用（需要将标志设置为 “true” 才能使用 WOFF2）。

4、使用您需要的字体

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

**提示：**字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。

如需将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（myFirstFont）：

实例:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

5、使用粗体文本

您必须添加另一条 @font-face 规则，其中包含粗体文本的描述符：

实例:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

文件 “sansation_bold.woff” 是另一个字体文件，其中包含 Sansation 字体的粗体字符。

每当带有 “myFirstFont” 字体族的一段文本应呈现粗体时，浏览器都会使用它。

这样，您就可以为同一字体设置许多 @font-face 规则。

6、CSS 字体描述

下表列出了能够在 @font-face 规则内定义的所有字体描述符（font descriptor）：

描述符	值	描述
font-family	name	必需。定义字体名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义应如何拉伸字体。默认值是 “normal”。
font-style	normal italic oblique	可选。定义字体的样式。默认值是 “normal”。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认值是 “normal”。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认值是 “U+0-10FFFF”。

十一、CSS 2D转换

1、CSS 2D 转换

CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。

2、浏览器支持

表格中的数字指注明了完全支持该属性的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TaVDMG54-1653830605839)(/image-20211123152843937.png)]

3、CSS 2D 转换方法

通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

4、translate() 方法

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

下面的例子把

元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：

div {
  transform: translate(50px, 100px);
}

5、rotate() 方法

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。

下面的例子把

元素顺时针旋转 20 度：

div {
  transform: rotate(20deg);
}

使用负值将逆时针旋转元素。

下面的例子把

元素逆时针旋转 20 度：

div {
  transform: rotate(-20deg);
}

6、scale() 方法

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

下面的例子把

元素增大为其原始宽度的两倍和其原始高度的三倍：

div {
  transform: scale(2, 3);
}

下面的例子把

元素减小为其原始宽度和高度的一半：

div {
  transform: scale(0.5, 0.5);
}

7、scaleX() 方法

scaleX() 方法增加或减少元素的宽度。

下面的例子把

元素增大为其原始宽度的两倍：

div {
  transform: scaleX(2);
}

以下例子把

元素缩减为其原始宽度的一半：

div {
  transform: scaleX(0.5);
}

8、scaleY() 方法

scaleY() 方法增加或减少元素的高度。

下面的例子把

元素增大到其原始高度的三倍：

div {
  transform: scaleY(3);
}

下面的例子把

元素缩减为其原始高度的一半：

div {
  transform: scaleY(0.5);
}

9、skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度。

下例把

元素沿X轴倾斜 20 度：

div {
  transform: skewX(20deg);
}

10、skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度。

下例把

元素沿 Y 轴倾斜 20 度：

div {
  transform: skewY(20deg);
}

11、skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

下面的例子使

元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：

div {
  transform: skew(20deg, 10deg);
}

如果未指定第二个参数，则值为零。因此，下例使

元素沿 X 轴倾斜 20 度：

div {
  transform: skew(20deg);
}

12、matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix( scaleX() , skewY() , skewX() , scaleY() , translateX() , translateY() )

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

13、CSS 转换属性

下表列出了所有 2D 变换属性：

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。

14、CSS 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 轴。

十二、CSS 3D转换

1、CSS 3D 转换

CSS 还支持 3D 转换。

在本节中，您将学习如下 CSS 属性：

transform

2、浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LdFuO5Vi-1653830605839)(/image-20211123154158656.png)]

3、CSS 3D 转换方法

通过 CSS transform 属性，您可以使用以下 3D 转换方法：

rotateX()
rotateY()
rotateZ()

4、rotateX() 方法

rotateX() 方法使元素绕其 X 轴旋转给定角度：

#myDiv {
  transform: rotateX(150deg);
}

5、rotateY() 方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度：

#myDiv {
  transform: rotateY(130deg);
}

6、rotateZ() 方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度：

#myDiv {
  transform: rotateZ(90deg);
}

7、CSS 转换属性

下表列出了所有 3D 变换属性：

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

8、CSS 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 转换元素的透视视图。

十三、CSS 过渡

1、CSS 过渡

CSS 过渡允许您在给定的时间内平滑地改变属性值。

在本节中，您将学习如下属性：

transition
transition-delay
transition-duration
transition-property
transition-timing-function

2、对过渡的浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lj85HS1O-1653830605840)(/image-20211123155053929.png)]

3、如何使用 CSS 过渡？

如需创建过渡效果，必须明确两件事：

您要添加效果的 CSS 属性
效果的持续时间

**注意：**如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。

下面的例子展示了 100px * 100px 的红色

元素。
元素还为 width 属性指定了过渡效果，持续时间为 2 秒：

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

当指定的 CSS 属性（width）值发生变化时，将开始过渡效果。

现在，让我们为 width 属性指定一个鼠标悬停在

元素上时的新值：

div:hover {
  width: 300px;
}

请注意，当光标从元素上移开时，它将逐渐变回其原始样式。

4、改变若干属性值

下面的例子为 width 和 height 属性都添加了过渡效果，width 是 2 秒，height 是 4 秒：

div {
  transition: width 2s, height 4s;
}

5、指定过渡的速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

下面的例子展示了可以使用的一些不同的速度曲线：

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

6、延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

下例在启动之前有 1 秒的延迟：

div {
  transition-delay: 1s;
}

7、过渡 + 转换

下例为转换添加过渡效果：

div {
  transition: width 2s, height 2s, transform 2s;
}

8、更多过渡实例

您可以可以一一指定 CSS 过渡属性，如下所示：

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

或使用简写的 transition 属性：

div {
  transition: width 2s linear 1s;
}

9、CSS 过渡属性

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

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-property	规定过渡效果所针对的 CSS 属性的名称。

十四、CSS 动画

1、CSS 动画

CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！

在本节中，您将学习如下属性：

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

2、对动画的浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jTV9vK65-1653830605840)(/image-20211123155916422.png)]

3、什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

4、@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

下面的例子将 “example” 动画绑定到

元素。动画将持续 4 秒钟，同时将
元素的背景颜色从 “red” 逐渐改为 “yellow”：

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字 “from” 和 “to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

您也可以使用百分比值。通过使用百分比，您可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25％，完成 50％以及动画完成 100％时更改

元素的背景颜色：

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

下面的例子将在动画完成 25％，完成 50％以及动画完成 100％时更改背景颜色和

元素的位置：

/* 动画代码 */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

5、延迟动画

animation-delay 属性规定动画开始的延迟时间。

下面的例子在开始动画前有 2 秒的延迟：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

在下面的例子中，动画将开始播放，就好像它已经播放了 2 秒钟一样：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

6、设置动画应运行多少次

animation-iteration-count 属性指定动画应运行的次数。

下面的例子在停止前把动画运行 3 次：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

下面的例子使用值 “infinite” 使动画永远持续下去：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

7、反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

下例将以相反的方向（向后）运行动画：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

下面的例子使用值 “alternate” 使动画先向前运行，然后向后运行：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

下面的例子使用值 “alternate-reverse” 使动画先向后运行，然后向前运行：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

8、指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

下面这些例子展示了可以使用的一些不同速度曲线：

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

9、指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

下面的例子让

元素在动画结束时保留来自最后一个关键帧的样式值：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

下面的例子在动画开始之前（在动画延迟期间）使

元素获得由第一个关键帧设置的样式值：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

下面的例子在动画开始之前使

元素获得第一个关键帧设置的样式值，以及在动画结束时保留最后一个关键帧的样式值：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

10、动画简写属性

下例使用六种动画属性：

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

使用简写的 animation 属性也可以实现与上例相同的动画效果：

div {
  animation: example 5s linear 2s infinite alternate;
}

11、CSS 动画属性

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

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

十五、CSS 工具提示

1、基础的工具提示

创建一个鼠标移到元素上时显示的工具提示：

<style>
/* Tooltip 容器 */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}

/* Tooltip 文本 */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* 定位工具提示文本 - 请看下面的例子 */
  position: absolute;
  z-index: 1;
}

/* 将鼠标悬停在工具提示容器上时，显示工具提示文本 */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

例子解释

HTML：

使用容器元素（例如

）并向其添加 “tooltip” 类。当用户将鼠标悬停在此
上时，会显示工具提示文本。

工具提示文本位于 class=“tooltiptext” 的嵌入式元素（如）中。

CSS：

tooltip 类使用 position:relative，用于放置工具提示文本（position:absolute）。注意：有关如何放置工具提示，请参见下面的例子。

tooltiptext 类保存实际的工具提示文本。默认情况下它是隐藏的，并会在鼠标悬停时可见（请参阅下文）。我们还为其添加了一些基本样式：120 像素的宽度、黑色背景、白色文本、文本居中以及 5px 的上下内边距（padding）。

CSS border-radius 属性用于向工具提示文本添加圆角。

当用户将鼠标移到 class=“tooltip” 的

上时，:hover 选择器用于显示工具提示文本。

2、定位工具提示

在本例中，工具提示位于“可悬停”文本（

）的右侧（left:105%）。另外请注意，top:-5px 用于将其放置在其容器元素的中间。我们使用数字 5 是因为工具提示文本的上下内边距均为 5px。如果增加其内边距，还请您同时增加 top 属性的值，以确保它停留在中间。如果要将工具提示放在左侧，也同样适用。

右侧工具提示

.tooltip .tooltiptext {
  top: -5px;
  left: 105%; 
}

左侧工具提示

.tooltip .tooltiptext {
  top: -5px;
  right: 105%; 
}

如果您希望工具提示位于上方或下方，请看下面的例子。请注意，我们使用了负 60 像素的左外边距属性（margin-left）。这是为了把工具提示与可悬停文本进行居中对齐。该值是工具提示宽度的一半（120/2 = 60）。

顶部工具提示

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%; 
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

底部工具提示

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

3、工具提示箭头

如需创建在工具提示的指定侧面显示的箭头，请在工具提示后添加“空的”内容，并使用伪元素类 ::after 和 content 属性。箭头本身是使用边框创建的。这会使工具提示看起来像气泡。

本例演示如何在工具提示的底部添加箭头：

底部箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

例子解释

将箭头定位在工具提示内：top: 100% 将箭头放置在工具提示的底部。left: 50% 将使箭头居中。

注意：border-width 属性指定箭头的大小。如果您更改此设置，也请将 margin-left 值更改为相同值。这将使箭头居中。

border-color 用于将内容转换为箭头。我们将上边框设置为黑色，其余设置为透明。如果所有面都是黑色，则最终将得到一个黑色的方形框。

本例演示了如何在工具提示的顶部添加箭头。请注意，这次我们设置了下边框的颜色：

顶部箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

本例演示如何在工具提示的左侧添加箭头：

左侧箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

本例演示如何在工具提示的右侧添加箭头：

右侧箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

4、淡入的工具提示（动画）

如果希望在即将显示的工具提示文本中淡入淡出，可以将 CSS transition 属性与 opacity 属性一同使用，并在指定的秒数（例子中是 1 秒）内从完全不可见变为 100％可见：

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}

十六、CSS 图像样式

1、圆角图像

使用 border-radius 属性创建圆形图像：

圆角图像:

img {
  border-radius: 8px;
}

圆形图像：

img {
  border-radius: 50%;
}

2、缩略图图像

使用 border 属性创建缩略图。

缩略图：

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

<img src="paris.jpg" alt="Paris">

作为链接的缩略图：

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

3、响应式图像

响应式图像会自动调整以适合屏幕尺寸。

如果您希望根据需要缩小图像，但需要杜绝放大到大于原始尺寸，请添加如下代码：

img {
  max-width: 100%;
  height: auto;
}

4、居中图像

如需使图像居中，请将左右外边距设置为 auto 并将其设置为块元素：

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

5、图片 / 卡片

实例：

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);
}

img {width: 100%}

div.container {
  text-align: center;
  padding: 10px 20px;
}

6、透明图像

opacity 属性的取值范围为 0.0 - 1.0。值越低，越透明：

img {
  opacity: 0.5;
}

7、图像文本

如何在图像中定位文本：

左上

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

右上

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

左下

.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}

右下

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

居中

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

8、图像滤镜

CSS filter 属性把视觉效果（如模糊和饱和度）添加到元素。

**注意：**Internet Explorer 或 Edge 12 不支持 filter 属性。

把所有图像的颜色更改为黑白（100％灰色）：

img {
  filter: grayscale(100%);
}

9、图像悬停叠加

创建鼠标悬停时的叠加效果：

淡入文本：

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

淡入框：

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

滑入（上）：

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

滑入（下）：

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

滑入（左）：

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
}

滑入（右）：

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
  left: 0;
}

10、翻转图像

实例:

img:hover {
  transform: scaleX(-1);
}

11、响应式图库

我们可以使用 CSS 创建自适应的图片库。

本例使用媒体查询来重新排列不同屏幕尺寸的图像。请调整浏览器窗口的大小以查看效果：

.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%;
  }
}

12、图像模态（Image Modal）

这是一个演示 CSS 和 JavaScript 如何协同工作的例子。

首先，请使用 CSS 创建模态窗口（对话框），并默认将其隐藏。

然后，当用户单击图像时，使用 JavaScript 显示模态窗口并在模态内部显示图像：

/* 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: 1500px;
}

/* 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 {  
  animation-name: zoom;
  animation-duration: 0.6s;
}

@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%;
  }
}

十七、CSS object-fit

CSS object-fit 属性用于规定应如何调整或的大小来适应其容器。

1、浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NNezJFl5-1653830605841)(/image-20211123171010923.png)]

2、CSS object-fit 属性

CSS object-fit 属性用于指定应如何调整或的大小以适合其容器。

这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。

300x300 像素–> 200x300 像素：

img {
  width: 200px;
  height: 300px;
}

我们看到图像被压缩以适合 200x300 像素的容器，并且原始宽高比被破坏了。

如果我们使用 object-fit: cover;，它会剪切图像的侧面，保留长宽比，并填充空间，如下所示：

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

3、CSS object-fit 属性的所有值

object-fit 属性可接受如下值：

fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none - 不对替换的内容调整大小。
scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）

下面的例子演示了 object-fit 属性的所有可能值：

fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}

十八、CSS 按钮

1、基本按钮样式

实例：

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

2、按钮颜色

请使用 background-color 属性更改按钮的背景色：

.button1 {background-color: #4CAF50;} /* 绿色 */
.button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 红色 */ 
.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */ 
.button5 {background-color: #555555;} /* 黑色 */

3、按钮尺寸

请使用 font-size 属性更改按钮的字体大小：

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

请使用 padding 属性更改按钮的内边距：

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

4、圆角按钮

请使用 border-radius 属性为按钮添加圆角：

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

5、彩色的按钮边框

请使用 border 属性为按钮添加彩色边框：

.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;/* 黑色 */
}

6、可悬停按钮

当鼠标移动到按钮上方时，使用 :hover 选择器可更改按钮的样式。

**提示：**请使用 transition-duration 属性来确定“悬停”效果的速度：

.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;
}

7、阴影按钮

请使用 box-shadow 属性为按钮添加阴影：

.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);
}

8、禁用的按钮

请使用 opacity 属性为按钮添加透明度（创建“禁用”外观）。

**提示：**您还可以添加带有 “not-allowed” 值的 cursor 属性，当您将鼠标悬停在按钮上时，该属性会显示 “no parking sign”（禁停标志）：

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

9、按钮宽度

默认情况下，按钮的大小取决于其文本内容（与内容的宽度一样）。请使用 width 属性来更改按钮的宽度：

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

10、按钮分组

删除外边距并向每个按钮添加 float:left，来创建按钮组：

.button {
  float: left;
}

11、带边框的按钮组

使用 border 属性来创建带边框的按钮组：

.button {
  float: left;
  border: 1px solid green;
}

12、垂直按钮组

使用 display:block 取代 float:left 将按钮上下分组，而不是并排：

.button {
  display: block;
}

13、图像上的按钮

实例：

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  color: black;
  font-size: 16px;
  padding: 16px 30px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.container .btn:hover {
  background-color: black;
  color: white;
}

14、动画按钮

实例 1

在鼠标悬停时添加箭头：

.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: '\00bb';
  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;
}

实例 2

添加点击时的“按键按下”效果：

.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);
}

实例 3

鼠标悬停时淡入：

.button {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
    opacity: 1
}

实例 4

添加点击时的“涟漪”效果：

.button {
  position: relative;
  background-color: #4CAF50;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #f1f1f1;
  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
}

十九、CSS 分页

1、简单的分页

如果网站上有很多页面，那么您可能希望在每张页面上添加某种分页功能：

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

2、活动的可悬停分页

用 .active 类突出显示当前页面，并在鼠标移到它们上方时使用 :hover 选择器更改每个页面链接的颜色：

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

3、圆角的活动可悬停分页

如果您需要圆角的 “active” 和 “hover” 按钮，请添加 border-radius 属性：

.pagination a {
  border-radius: 5px;
}

.pagination a.active {
  border-radius: 5px;
}

4、可悬停的过渡效果

请将 transition 属性添加到页面链接，创建鼠标悬停时的过渡效果：

.pagination a {
  transition: background-color .3s;
}

5、带边框的分页

请使用 border 属性为分页添加边框：

.pagination a {
  border: 1px solid #ddd; /* Gray */
}

6、圆角边框的分页

**提示：**在分页的第一个和最后一个链接中添加圆角边框：

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

7、链接之间的空间

提示：如果不想组合页面链接，请添加 margin 属性：

.pagination a {
  margin: 0 4px; /* 上下外边距为 0，可灵活修改 */
}

8、分页尺寸

请使用 font-size 属性更改分页的大小：

.pagination a {
  font-size: 22px;
}

9、居中的分页

如需居中分页，请使用设置了 text-align:center 的容器元素（如

）包围它：

.center {
  text-align: center;
}

10、更多实例

前进/后退按钮 :

导航分页：

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
}

11、面包屑

分页的另一种形式是所谓的“面包屑”（breadcrumbs）：

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";
}

二十、CSS 多列

1、CSS 多列布局及属性

CSS 多列布局允许我们轻松定义多列文本 - 就像报纸那样

在本节中，将学到以下多列属性：

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

2、浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g3XNaASU-1653830605842)(/1637677514(1)].jpg)

3、CSS 创建多列

column-count 属性规定元素应被划分的列数。

下面的例子将

元素中的文本分为 3 列：

div {
  column-count: 3;
}

4、CSS 指定列之间的间隙

column-gap 属性规定列之间的间隔。

下面的例子指定列之间的间距为 40 像素：

div {
  column-gap: 40px;
}

5、CSS 列规则

column-rule-style 属性规定列之间的规则样式：

div {
  column-rule-style: solid;
}

column-rule-width 属性规定列之间的规则宽度：

div {
  column-rule-width: 1px;
}

column-rule-color 属性规定列之间的规则的颜色：

div {
  column-rule-color: lightblue;
}

column-rule 属性是用于设置上面所有 column-rule-* 属性的简写属性。

下例设置了列之间的规则的宽度、样式和颜色：

div {
  column-rule: 1px solid lightblue;
}

6、指定元素应该横跨多少列

column-span 属性规定元素应跨越多少列。

下例规定了

元素应跨所有列：

h2 {
  column-span: all;
}

7、指定列宽度

column-width 属性为列指定建议的最佳宽度。

下例规定了列的建议最佳宽度应为 100px：

div {
  column-width: 100px;
}

8、CSS 多列属性

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

属性	描述
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 的简写属性。

二十一、CSS 用户界面

1、CSS 用户界面

在本节中，您将学到以下 CSS 用户界面属性：

resize
outline-offset

2、浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IdOjsGMA-1653830605842)(/1637678015(1)].jpg)

3、CSS 调整大小

resize 属性规定元素是否应（以及如何）被用户调整大小。

**注意：**Internet Explorer 不支持 resize 属性。

下例只允许用户调整

元素的宽度：

div {
  resize: horizontal;
  overflow: auto;
}

下例只允许用户调整

元素的高度：

div {
  resize: vertical;
  overflow: auto;
}

下例允许用户能够调整

元素的高度和宽度：

div {
  resize: both;
  overflow: auto;
}

在许多浏览器中，默认可调整大小。在这里，我们使用了 resize 属性来禁用这种可缩放性：

textarea {
  resize: none;
}

4、CSS 轮廓偏移

outline-offset 属性在轮廓与元素的边缘边框之间添加空间。

**注意：**轮廓与边框不同！与边框不同，轮廓线是在元素边框之外绘制的，并且可能与其他内容重叠。同时，轮廓也不是元素尺寸的一部分：元素的总宽度和高度不受轮廓线宽度的影响。

下面的例子使用 outline-offset 属性添加了边框和轮廓之间的空间：

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

5、CSS 用户界面属性

下表列出了所有用户界面属性：

属性	描述
outline-offset	在轮廓和元素的边框边缘之间添加空间。
resize	规定元素是否可由用户调整大小。

二十二、CSS 变量

1、CSS 变量

var() 函数用于插入 CSS 变量的值。

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

2、传统方式

以下例子显示了在样式表中定义一些颜色的传统方式（通过为每个特定元素定义要使用的颜色）：

body { background-color: #1e90ff; }

h2 { border-bottom: 2px solid #1e90ff; }

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

3、var() 函数的语法

var() 函数用于插入 CSS 变量的值。

var() 函数的语法如下：

var(name, value)

值	描述
name	必需。变量名（以两条破折号开头）。
value	可选。回退值（在未找到变量时使用）。

**注释：**变量名称必须以两个破折号（–）开头，且区分大小写！

4、var() 如何工作

首先：CSS 变量可以有全局或局部作用域。

全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。

如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。

如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

下面的例子与上面的例子相同，但是在这里我们使用 var() 函数。

首先，我们声明两个全局变量（–blue 和 --white）。然后，我们使用 var() 函数稍后在样式表中插入变量的值：

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

使用 var() 有如下优势：

使代码更易于阅读（更容易理解）
使修改颜色值更加容易

如需将蓝色和白色改为较柔和的蓝色和白色，您只需要修改两个变量值：

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

5、浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YexntEwI-1653830605842)(/1637678458(1)].jpg)

6、CSS var() 函数

函数	描述
var()	插入 CSS 变量的值。

二十三、CSS 覆盖变量

1、用局部变量覆盖全局变量

从上一节我们了解到，可以在整个文档中访问/使用全局变量，而局部变量只能在声明它的选择器内使用。

请看上一节中的例子：

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

有时，我们希望变量仅在页面的特定部分中进行更改。

假设我们想要按钮元素使用不同的蓝色。那么，我们可以在 button 选择器内重新声明 --blue 变量。当我们在这个选择器中使用 var(–blue) 时，它将使用此处声明的局部 --blue 变量值。

我们看到局部的 --blue 变量会覆盖 button 元素的全局 --blue 变量：

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

2、添加一个新的局部变量

如果只在一个地方使用一个变量，我们也可以声明一个新的局部变量，就如：

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

3、浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gkLEIAo3-1653830605843)(/1637678458(1)].jpg)

4、CSS var() 函数

函数	描述
var()	插入 CSS 变量的值。

二十四、CSS变量- JavaScript

1、使用 JavaScript 更改变量

CSS 变量可以访问 DOM，这意味着您可以通过 JavaScript 更改它们。

这个例子说明了如何创建脚本来显示并更改上一页中使用的示例中的 --blue 变量:

<;script>
// 获取根元素
var r = document.querySelector(':root');

// 创建获取变量值的函数
function myFunction_get() {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  // Alert the value of the --blue variable
  alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}

// 创建设置变量值的函数
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
<;/script>

2、浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q6f0swk2-1653830605843)(/1637678458(1)].jpg)

3、CSS var() 函数

函数	描述
var()	插入 CSS 变量的值。

二十五、CSS变量–媒体查询

1、在媒体查询中使用变量

现在，我们希望在媒体查询中修改变量值。

提示：媒体查询旨在为不同的设备（显示器、平板电脑、手机等）定义不同的样式规则。您可以在“媒体查询”一章中学习更多有关媒体查询的知识。

在这里，我们首先为 .containe 类声明一个名为 --fontsize 的新局部变量。我们将其值设置为 25 像素。然后我们在 .container 类中进一步使用它。然后，我们创建一个 @media 规则，内容为“当浏览器的宽度为 450px 或更宽时，将 .container 类的 --fontsize 变量值更改为 50px。”

这是完整的实例：

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

.container {
  --fontsize: 25px;
}

/* 样式 */
body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
}

这是另一个例子，在其中我们还更改了 @media 规则中 --blue 变量的值：

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

.container {
  --fontsize: 25px;
}

/* 样式 */
body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
   :root {
    --blue: lightblue;
  }
}

2、浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-83TD9WrK-1653830605844)(/1637678458(1)].jpg)

3、CSS var() 函数

函数	描述
var()	插入 CSS 变量的值。

二十六、CSS Box Sizing

1、CSS Box Sizing

CSS box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。

2、假如不指定 CSS box-sizing 属性

默认情况下，元素的宽度和高度是这样计算的：

width + padding + border = 元素的实际宽度
height + padding + border = 元素的实际高度

这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。

下图展示了两个有相同指定宽度和高度的

元素：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V5NLO09f-1653830605844)(/1637679150(1)].jpg)

上面的两个

元素在最终结果中呈现出 不同的尺寸（因为 div2 指定了内边距）：

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

box-sizing 属性解决了这个问题。

3、如果使用 CSS box-sizing 属性

box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框。

如果在元素上设置了 box-sizing: border-box;，则宽度和高度会包括内边距和边框：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sUsDUyts-1653830605845)(/1637679292(1)].jpg)

该例与上例相同，两个

元素都设置了 box-sizing: border-box;：

.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;
}

由于使用 box-sizing: border-box; 的效果如此之好，许多开发人员希望页面上的所有元素都能够以这种方式工作。

下面的代码能够确保以这种更直观的方式调整所有元素的大小。许多浏览器已经在对许多表单元素使用 box-sizing: border-box;（但并非全部 - 这就是为什么 input 和 textarea 在 width: 100%; 时看起来不同）。

将其应用于所有元素是安全且明智的：

* {
  box-sizing: border-box;
}

4、CSS Box Sizing 属性

属性	描述
box-sizing	定义元素宽度和高度的计算方式：它们是否应包含内边距（padding）和边框。

二十七、CSS Flexbox

1、CSS Flexbox 布局模块

在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：

块（Block），用于网页中的部分（节）
行内（Inline），用于文本
表，用于二维表数据
定位，用于元素的明确位置

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

2、浏览器支持

所有现代浏览器均支持 flexbox 属性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AiIpPCoc-1653830605845)(/1637679775(1)].jpg)

3、Flexbox 元素

如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器。

实例

含有三个 flex 项目的 flex 容器：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

4、父元素（容器）

通过将 display 属性设置为 flex，flex 容器将可伸缩：

.flex-container {
  display: flex;
}

以下是 flex 容器属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

5、flex-direction 属性

flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。

实例

column 值设置垂直堆叠 flex 项目（从上到下）：

.flex-container {
  display: flex;
  flex-direction: column;
}

column-reverse 值垂直堆叠 flex 项目（但从下到上）：

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

row 值水平堆叠 flex 项目（从左到右）：

.flex-container {
  display: flex;
  flex-direction: row;
}

row-reverse 值水平堆叠 flex 项目（但从右到左）：

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

6、flex-wrap 属性

flex-wrap 属性规定是否应该对 flex 项目换行。

实例

wrap 值规定 flex 项目将在必要时进行换行：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

nowrap 值规定将不对 flex 项目换行（默认）：

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行：

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

7、flex-flow 属性

flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

实例

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

8、justify-content 属性

justify-content 属性用于对齐 flex 项目：

实例

center 值将 flex 项目在容器的中心对齐：

.flex-container {
  display: flex;
  justify-content: center;
}

flex-start 值将 flex 项目在容器的开头对齐（默认）：

.flex-container {
  display: flex;
  justify-content: flex-start;
}

flex-end 值将 flex 项目在容器的末端对齐：

.flex-container {
  display: flex;
  justify-content: flex-end;
}

space-around 值显示行之前、之间和之后带有空格的 flex 项目：

.flex-container {
  display: flex;
  justify-content: space-around;
}

space-between 值显示行之间有空格的 flex 项目：

.flex-container {
  display: flex;
  justify-content: space-between;
}

9、align-items 属性

align-items 属性用于垂直对齐 flex 项目。

实例

center 值将 flex 项目在容器中间对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

flex-start 值将 flex 项目在容器顶部对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

flex-end 值将弹性项目在容器底部对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

stretch 值拉伸 flex 项目以填充容器（默认）：

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

baseline 值使 flex 项目基线对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

**注意：**该例使用不同的 font-size 来演示项目已按文本基线对齐：

10、align-content 属性

align-content 属性用于对齐弹性线。

在这些例子中将 flex-wrap 属性设置为 wrap，以便更好地演示 align-content 属性。

实例

space-between 值显示的弹性线之间有相等的间距：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

space-around 值显示弹性线在其之前、之间和之后带有空格：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

stretch 值拉伸弹性线以占据剩余空间（默认）：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

center 值在容器中间显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

flex-start 值在容器开头显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

flex-end 值在容器的末尾显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

11、完美的居中

在下面的例子中，我们会解决一个非常常见的样式问题：完美居中。

解决方案：将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中：

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

12、子元素（项目）

flex 容器的直接子元素会自动成为弹性（flex）项目。

实例

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

用于弹性项目的属性有：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

13、order 属性

order 属性规定 flex 项目的顺序。

代码中的首个 flex 项目不必在布局中显示为第一项。

order 值必须是数字，默认值是 0。

实例

order 属性可以改变 flex 项目的顺序：

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

14、flex-grow 属性

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。

该值必须是数字，默认值是 0。

实例

使第三个弹性项目的增长速度比其他弹性项目快八倍：

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

15、flex-shrink 属性

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

该值必须是数字，默认值是 0。

实例

不要让第三个弹性项目收缩得与其他弹性项目一样多：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

16、flex-basis 属性

flex-basis 属性规定 flex 项目的初始长度。

实例

将第三个弹性项目的初始长度设置为 200 像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

17、flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

实例

使第三个弹性项目不可增长（0），不可收缩（0），且初始长度为 200 像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

18、align-self 属性

align-self 属性规定弹性容器内所选项目的对齐方式。

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

实例

把第三个弹性项目对齐到容器的中间：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

将第二个弹性项目在容器顶部对齐，将第三个弹性项目在容器底部对齐：

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

19、使用 Flexbox 的响应式图库

使用 flexbox 创建响应式图像库，该图像库根据屏幕大小在四幅、两幅或全宽图像之间变化：

/* 创建并排的四个等列 */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* 响应式布局 - 创建两列而不是四列布局 */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* 响应式布局 - 创建上下堆叠而不是并排的两列布局 */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

20、使用 Flexbox 的响应式网站

使用 flexbox 创建响应式网站，其中包含弹性导航栏和弹性内容：

/* 设置 body 元素的样式 */
body {
  font-family: Arial;
  margin: 0;
}

/* 标题 / LOGO */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* 设置顶部导航栏样式 */
.navbar {
  display: flex;
  background-color: #333;
}

/* 设置导航条链接演示 */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* 更改鼠标悬停时的颜色 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* 列容器 */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* 创建并排的非等列 */
/* 侧栏 / 左侧列 */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* 主列 */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* 伪图像，仅供示例 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* 响应式布局 - 当屏幕小于 700 像素宽时，让两列堆叠而不是并排 */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}

21、CSS Flexbox 属性

下表列出了与 flexbox 一起使用的 CSS 属性：

属性	描述
display	规定用于 HTML 元素的盒类型。
flex-direction	规定弹性容器内的弹性项目的方向。
justify-content	当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。
flex-wrap	规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。
align-items	当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。
align-content	修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。
flex-flow	flex-direction 和 flex-wrap 的简写属性。
order	规定弹性项目相对于同一容器内其余弹性项目的顺序。
align-self	用于弹性项目。覆盖容器的 align-items 属性。
flex	flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。

二十八、CSS 媒体查询

1、CSS2 引入了媒体类型

CSS2 中引入了 @media 规则，它让为不同媒体类型定义不同样式规则成为可能。

例如：您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备，甚至还有一组用于电视，等等。

不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。

2、CSS3 引入了媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

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

视口的宽度和高度
设备的宽度和高度
方向（平板电脑/手机处于横向还是纵向模式）
分辨率

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。

3、浏览器支持

表格中的数字注明了完全支持 @media 规则的首个浏览器版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vR9OhAX6-1653830605846)(/1637681507(1)].jpg)

4、媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

@media not|only mediatype and (expressions) {
  CSS-Code;
}

如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

除非您使用 not 或 only 运算符，否则媒体类型是可选的，且隐含 all 类型。

您还可以针对不同的媒体使用不同的样式表：

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

5、CSS3 媒体类型

值	描述
all	用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等等。
speech	用于大声“读出”页面的屏幕阅读器。

6、媒体查询的简单实例

使用媒体查询的一种方法是在样式表内有一个备用的 CSS 部分。

下面的例子在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色会是粉色）：

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

下例显示了一个菜单，如果视口的宽度为 480 像素或更宽，则该菜单会浮动到页面的左侧（如果视口小于 480 像素，则该菜单将位于内容的顶部）：

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

二十九、CSS媒体查询 - 实例

1、CSS 媒体查询 - 更多实例

让我们看看使用媒体查询的更多例子。

媒体查询是一种流行的技术，用于将定制的样式表传递给不同的设备。

下面演示一个简单的例子，让我们来更改不同设备的背景色：

/* 将 body 的背景色设置为棕褐色 */
body {
  background-color: tan;
}

/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

您想知道我们为什么要精确使用 992px 和 600px 吗？它们就是我们所称的设备的“典型断点”（typical breakpoints）。

2、菜单的媒体查询

在本例中，我们使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。

/* navbar 容器 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar 链接 */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 在宽度为 600 像素或更小的屏幕上，使菜单链接彼此堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

3、列的媒体查询

媒体查询的常见用法是创建弹性布局。在本例中，我们创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

/* 创建彼此相邻浮动的四个相等的列 */
.column {
  float: left;
  width: 25%;
}

/* 在 992p x或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

**提示：**更现代的创建列布局方法是使用 CSS Flexbox（请参见下面的例子）。但是，Internet Explorer 10 以及更早版本不支持它。如果需要 IE6-10 的支持，请使用浮动（如上所示）。

/* 弹性盒的容器 */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* 创建四个相等的列 */
.column {
  flex: 25%;
  padding: 20px;
}

/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

4、用媒体查询隐藏元素

媒体查询的另一种常见用法是在不同屏幕尺寸上隐藏元素：

在小屏幕上则会隐藏。

/* 如果屏幕尺寸为600像素或更小，请隐藏该元素 */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

5、用媒体查询改变字体

您还可以使用媒体查询来更改不同屏幕尺寸上的元素的字体大小：

可变的字体大小。

/* 如果屏幕尺寸超过 600 像素，把 <div> 的字体大小设置为 80 像素 */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

/* 如果屏幕大小为 600px 或更小，把 <div> 的字体大小设置为 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

6、弹性图片库

在此例中，我们将媒体查询与 flexbox 一起使用来创建响应式图片库：

/* 创建彼此相邻的四个相等的列 */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* 响应式布局 - 制作两列而不是四列的布局 */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* 响应式布局 - 使两列相互堆叠而不是彼此并排 */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

7、弹性网站

在本例中，我们将媒体查询与 flexbox 一起使用，以创建响应式网站，其中包含弹性导航栏和弹性内容。

/* 设置 body 的样式 */
body {
  font-family: Arial;
  margin: 0;
}

/* 页眉/LOGO */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* 设置顶部导航栏的样式 */
.navbar {
  display: flex;
  background-color: #333;
}

/* 设置导航栏链接的样式 */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* 悬停时改变颜色 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* 列容器 */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* 创建两个彼此相邻的不相等的列 */
/* 侧栏/左侧列 */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* 主列 */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* 伪图像，仅用于此例 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* 响应式布局 - 当屏幕宽度小于 700 像素时，使两列相互堆叠，而不是彼此相邻 */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}

8、方向：人像 / 风景

媒体查询还可以用于根据浏览器的方向更改页面的布局。

您可以设置一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度时才适用，即所谓的横屏：

实例

如果方向处于横向模式，则使用浅蓝背景色：

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

9、最小宽度到最大宽度

您还可以使用 max-width 和 min-width 属性设置最小宽度和最大宽度。

例如，当浏览器的宽度在 600 到 900 像素之间时，更改

元素的外观：

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

使用附加值：在下面的例子中，我们使用逗号（类似 OR 运算符）将附加的媒体查询添加到已有媒体查询中：

/* 当宽度在 600 像素到 900 像素之间或大于 1100 像素时 - 更改 <div> 的外观 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
ody {
  background-color: tan;
}

/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

您想知道我们为什么要精确使用 992px 和 600px 吗？它们就是我们所称的设备的“典型断点”（typical breakpoints）。

2、菜单的媒体查询

在本例中，我们使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。

/* navbar 容器 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar 链接 */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 在宽度为 600 像素或更小的屏幕上，使菜单链接彼此堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

3、列的媒体查询

媒体查询的常见用法是创建弹性布局。在本例中，我们创建了一个布局，该布局在四列、两列和全宽列之间变化，具体取决于不同的屏幕尺寸：

/* 创建彼此相邻浮动的四个相等的列 */
.column {
  float: left;
  width: 25%;
}

/* 在 992p x或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

**提示：**更现代的创建列布局方法是使用 CSS Flexbox（请参见下面的例子）。但是，Internet Explorer 10 以及更早版本不支持它。如果需要 IE6-10 的支持，请使用浮动（如上所示）。

/* 弹性盒的容器 */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* 创建四个相等的列 */
.column {
  flex: 25%;
  padding: 20px;
}

/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

4、用媒体查询隐藏元素

媒体查询的另一种常见用法是在不同屏幕尺寸上隐藏元素：

在小屏幕上则会隐藏。

/* 如果屏幕尺寸为600像素或更小，请隐藏该元素 */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

5、用媒体查询改变字体

您还可以使用媒体查询来更改不同屏幕尺寸上的元素的字体大小：

可变的字体大小。

/* 如果屏幕尺寸超过 600 像素，把 <div> 的字体大小设置为 80 像素 */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

/* 如果屏幕大小为 600px 或更小，把 <div> 的字体大小设置为 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

6、弹性图片库

在此例中，我们将媒体查询与 flexbox 一起使用来创建响应式图片库：

/* 创建彼此相邻的四个相等的列 */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* 响应式布局 - 制作两列而不是四列的布局 */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* 响应式布局 - 使两列相互堆叠而不是彼此并排 */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

7、弹性网站

在本例中，我们将媒体查询与 flexbox 一起使用，以创建响应式网站，其中包含弹性导航栏和弹性内容。

/* 设置 body 的样式 */
body {
  font-family: Arial;
  margin: 0;
}

/* 页眉/LOGO */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* 设置顶部导航栏的样式 */
.navbar {
  display: flex;
  background-color: #333;
}

/* 设置导航栏链接的样式 */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* 悬停时改变颜色 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* 列容器 */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* 创建两个彼此相邻的不相等的列 */
/* 侧栏/左侧列 */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* 主列 */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* 伪图像，仅用于此例 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* 页脚 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* 响应式布局 - 当屏幕宽度小于 700 像素时，使两列相互堆叠，而不是彼此相邻 */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}

8、方向：人像 / 风景

媒体查询还可以用于根据浏览器的方向更改页面的布局。

您可以设置一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度时才适用，即所谓的横屏：

实例

如果方向处于横向模式，则使用浅蓝背景色：

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

9、最小宽度到最大宽度

您还可以使用 max-width 和 min-width 属性设置最小宽度和最大宽度。

例如，当浏览器的宽度在 600 到 900 像素之间时，更改

元素的外观：

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

使用附加值：在下面的例子中，我们使用逗号（类似 OR 运算符）将附加的媒体查询添加到已有媒体查询中：

/* 当宽度在 600 像素到 900 像素之间或大于 1100 像素时 - 更改 <div> 的外观 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

real_fxyyyyyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3新版

typora-root-url: picCSS3一、CSS 圆角1、CSS圆角通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。2、CSS border-radius 属性CSS border-radius 属性定义元素角的半径。**提示：**您可以使用此属性为元素添加圆角！这里有三个例子：带有指定背景颜色的元素的圆角：带边框元素的圆角：带有背景图像的元素的圆角：这是代码：#rcorners1 { border-radius: 2.
复制链接

扫一扫