CSS3（CSS3简介、私有前缀、新增长度单位、新增盒子属性、新增背景属性、新增边框属性、新增文本属性、新增渐变、Web字体、字体图标）

编程语言 2025-04-12 00:16
0 阅读

文章目录


视频教程： 171_CSS3_简介

1. CSS3简介

CSS3在CSS2.1的基础上增加了很多强大的新功能，并采用了模块化开发，使得不同模块可以独立更新和发布，从而提高了开发效率和灵活性

CSS3的主要特点和新特性：

  1. 模块化：CSS3将样式表分成了多个模块，每个模块负责一个特定的功能或特性，如盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等
  2. 新特性：
    • 视觉效果：包括圆角、阴影、半透明背景、渐变以及图片边框等，不再依赖图片即可实现
    • 选择器：引入了属性选择器、伪类选择器和伪元素选择器等，使开发者能够更精确地选择DOM元素
    • 过渡和动画：可以实现元素的过渡效果和动画效果，增强用户体验
    • 响应式布局：通过媒体查询功能，可以根据不同设备自动适应屏幕尺寸和分辨率，便于创建响应式布局
    • 字体支持：支持更多的字体格式和字体效果，提高了网页的设计效果
    • 2D和3D转换：可以实现元素的旋转、缩放、倾斜等效果

2. 私有前缀

2.1 什么是私有前缀

CSS3私有前缀是浏览器厂商为了提前支持新的CSS属性而引入的一种特殊前缀。这些前缀用于标识尚未成为W3C标准的一部分的CSS属性或规则。通过添加这些前缀，浏览器可以识别并应用这些新属性，即使它们还未正式成为标准的一部分

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;

2.2 为什么要有私有前缀

查询 CSS3 兼容性的网站：https://caniuse.com/

  1. 提前支持新属性：私有前缀允许浏览器厂商提前实现和测试新的CSS属性，而不必等待W3C标准的最终确定。这有助于推动CSS技术的发展和应用
  2. 兼容性保障：通过使用私有前缀，浏览器厂商可以确保新属性在老版本浏览器中的兼容性。这样，开发者可以在新浏览器中尝试新特性，同时不破坏在旧浏览器中的显示效果
  3. 标准过渡：私有前缀为浏览器厂商提供了一个过渡期，在W3C标准正式发布之前，通过私有前缀来支持新属性。等到标准确定后，浏览器可以逐步移除私有前缀，支持标准写法

2.3 主流浏览器的私有前缀

  1. -webkit-：适用于Chrome浏览器、Edge浏览器和Safari浏览器，这些浏览器使用WebKit引擎

    -webkit-border-radius: 10px;

  2. -moz-：适用于Firefox浏览器，使用Gecko引擎

    -moz-border-radius: 10px;

  3. -ms-：适用于Internet Explorer浏览器，使用Trident引擎

    -ms-border-radius: 10px;

  4. -o-：早期适用于Opera浏览器，使用Presto引擎，但现在Opera也改为使用WebKit引擎

    -o-border-radius: 10px;

2.4 现代工具

随着浏览器的更新，大多数新版本浏览器已经支持不带前缀的写法。为了简化开发过程，可以使用Autoprefixer这样的工具来自动添加和管理浏览器私有前缀，从而实现跨浏览器的CSS3特性兼容

3. 新增长度单位

CSS3新增了许多长度单位，这些单位提供了更多的灵活性和精确性，适用于不同的布局需求

3.1 rem (root em)

rem是相对于根元素（通常是<html>）的字体大小。假设根元素的字体大小为16px，则1rem等于16px

html {
    
    
    font-size: 16px;
}
h1 {
    
    
    font-size: 2rem; /* 32px */
}

应用场景：rem单位常用于响应式设计中，通过调整根元素的字体大小，可以全局控制网页中元素的大小

3.2 vw (viewport width)

vw是视口宽度的百分比。1vw等于视口宽度的1%

.container {
    
    
    width: 50vw; /* 视口宽度的50% */
}

应用场景：vw单位适用于创建与视口宽度相关的布局，特别适合响应式设计

3.3 vh (viewport height)

vh是视口高度的百分比。1vh等于视口高度的1%

.full-height {
    
    
    height: 100vh; /* 视口高度的100% */
}

应用场景：vh单位常用于创建与视口高度相关的布局，如全屏高度的广告或背景

3.4 vmin (viewport minimum)

vmin是视口宽度和高度中较小值的百分比。1vmin等于视口较小尺寸的1%

.min-size {
    
    
    width: 50vmin; /* 视口较小尺寸的50% */
}

应用场景：vmin单位适用于在视口较小尺寸方向上保持元素大小一致的场景

3.5 vmax (viewport maximum)

vmax是视口宽度和高度中较大值的百分比。1vmax等于视口较大尺寸的1%

.max-size {
    
    
    width: 50vmax; /* 视口较大尺寸的50% */
}

应用场景：vmax单位适用于在视口较大尺寸方向上保持元素大小一致的场景

4. 新增盒子属性

CSS3在盒子模型方面新增了一些属性，这些属性极大地丰富了网页的样式设计，提供了更多的灵活性和控制能力

4.1 box-sizing

box-sizing属性用于控制盒模型的大小计算方式。主要有两个值：

  • content-box（默认值）：盒子的宽度和高度只包括内容区（content），不包括内边距（padding）和边框（border）。因此，如果设置了padding和border，盒子会变大
  • border-box：盒子的宽度和高度包括内容区、内边距和边框。这意味着设置了padding和border后，盒子不会变大，因为它们已经被包含在宽度和高度内
.box1 {
    
    
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 5px solid red;
    box-sizing: content-box; /* 默认值，盒子会变大 */
}
.box2 {
    
    
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 5px solid red;
    box-sizing: border-box; /* 盒子不会变大 */
}

应用场景：border-box特别适用于响应式设计，可以避免因padding和border而导致的布局问题

4.2 box-shadow

box-shadow属性用于为元素添加阴影效果。可以设置水平阴影、垂直阴影、模糊距离、阴影大小和阴影颜色

box-shadow: h-offset v-offset blur spread color inset;

.shadow-box {
    
    
    width: 100px;
    height: 100px;
    background-color: #f0f0f0;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
}

应用场景：为元素添加阴影效果，增强页面的立体感和层次感

参数名称 说明
水平阴影（h-offset） 定义阴影的水平偏移量。正值向右偏移，负值向左偏移
垂直阴影（v-offset） 定义阴影的垂直偏移量。正值向下偏移，负值向上偏移
模糊距离（blur） 定义阴影的模糊程度。值越大，阴影越模糊
阴影大小（spread） 定义阴影的扩展大小。正值使阴影扩大，负值使阴影缩小
阴影颜色（color） 定义阴影的颜色。可以使用任何有效的CSS颜色值
内阴影（inset） 可选关键字，用于将阴影改为内阴影。默认为外阴影，使用inset时为内阴影

4.3 resize

resize属性用于控制元素的大小调整。可以设置为none、both、horizontal、vertical等值

.resizable-box {
    
    
    width: 100px;
    height: 100px;
    background-color: #f0f0f0;
    resize: both;
    overflow: auto;
}

应用场景：常用于可调整大小的文本区域或容器，提高用户体验

4.4 opacity

opacity属性用于设置元素的透明度。值范围从0（完全透明）到1（完全不透明）

.transparent-box {
    
    
    width: 100px;
    height: 100px;
    background-color: rgba(0,0,255,0.5);
    opacity: 0.5;
}

应用场景：用于创建淡入淡出效果，或者需要部分透明的元素

5. 新增背景属性

CSS3为网页设计和布局带来了许多新的背景属性，这些属性提供了更多的灵活性和控制能力

5.1 background-image

background-image 属性允许你为元素添加一个或多个背景图像

.multiple-backgrounds {
    
    
  background-image: url('image1.jpg'), url('image2.jpg'); /* 添加多个背景图像 */
}

5.2 background-size

background-size 属性用于指定背景图像的大小

.cover {
    
    
  background-size: cover; /* 覆盖整个元素，保持图像的宽高比 */
}
.contain {
    
    
  background-size: contain; /* 包含整个图像，保持图像的宽高比 */
}
.fixed-size {
    
    
  background-size: 100px 150px; /* 设置背景图像的具体宽度和高度 */
}

5.3 background-repeat

background-repeat 属性控制背景图像的重复方式

.round {
    
    
  background-repeat: round; /* 背景图像自动缩放以适应空间，不会裁剪图像 */
}
.space {
    
    
  background-repeat: space; /* 背景图像平铺时保持相同的间距 */
}
.no-repeat {
    
    
  background-repeat: no-repeat; /* 不重复背景图像 */
}

5.4 background-origin

background-origin 属性定义了背景图像的定位区域

.padding-box {
    
    
  background-origin: padding-box; /* 背景图像相对于内边距框来定位 */
}
.border-box {
    
    
  background-origin: border-box; /* 背景图像相对于边框盒来定位 */
}
.content-box {
    
    
  background-origin: content-box; /* 背景图像相对于内容框来定位 */
}

5.5 background-clip

background-clip 属性用于确定背景图像的裁剪区域

.border-clip {
    
    
  background-clip: border-box; /* 背景被裁剪到边框盒 */
}
.padding-clip {
    
    
  background-clip: padding-box; /* 背景被裁剪到内边距框 */
}
.content-clip {
    
    
  background-clip: content-box; /* 背景被裁剪到内容框 */
}
.text-clip {
    
    
  background-clip: text; /* 背景被裁剪成文字的前景色 */
}

5.6 background-attachment

background-attachment 属性控制背景图像是否随页面滚动

.fixed-background {
    
    
  background-attachment: fixed; /* 当页面滚动时，背景图像不会移动 */
}

5.7 background-position

background-position 属性用于设置背景图像的位置

.multiple-positions {
    
    
  background-position: right top, left bottom; /* 为多个背景图像设置位置 */
}

5.8 background

background 是一个简写属性，允许一次性设置所有背景相关的属性

.complex-background {
    
    
  background: url('image.jpg') no-repeat center center fixed; /* 简写属性 */
}

6. 新增边框属性

CSS3引入了一些新的边框属性，提供了更丰富的边框样式和效果

6.1 border-radius

border-radius 属性用于创建圆角边框。它可以应用于一个或多个角，并且可以接受一个或两个值

.rounded-corners {
    
    
  border-radius: 10px; /* 所有角 */
}
.rounded-top-left {
    
    
  border-radius: 10px 0 0 0; /* 左上角 */
}
.rounded-corners-elliptical {
    
    
  border-radius: 10px / 5px; /* 椭圆形角 */
}

6.2 box-shadow

box-shadow 属性用于给元素添加阴影效果。它可以有多个值，包括水平偏移、垂直偏移、模糊半径、扩散半径和颜色

.shadow {
    
    
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* x偏移, y偏移, 模糊半径, 颜色 */
}
.inner-shadow {
    
    
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5); /* 内阴影 */
}
.multiple-shadows {
    
    
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), /* 第一个阴影 */
              -5px -5px 10px rgba(0, 0, 0, 0.3); /* 第二个阴影 */
}

7. 新增文本属性

视频教程：176_CSS3_新增文本属性

7.1 text-shadow

.text-shadow {
    
    
  text-shadow: 2px 2px 4px #000000;
}
  • horizontal-offset (必需): 水平阴影的位置，可以是正数或负数
  • vertical-offset (必需): 垂直阴影的位置，可以是正数或负数
  • blur-radius (可选): 阴影的模糊半径，值越大，阴影越模糊
  • color (可选): 阴影的颜色，如果没有指定，将使用文本颜色

7.2 text-overflow

要使 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值，white-space 为 nowrap 值

.text-overflow {
    
    
  text-overflow: clip; /* 直接裁剪文本 */
  text-overflow: ellipsis; /* 显示省略符号来代表被裁剪的文本 */
}
  • clip: 裁剪文本
  • ellipsis: 显示省略号（…）

7.3 word-break

.word-break {
    
    
  word-break: normal; /* 默认值，使用默认的断行规则 */
  word-break: break-all; /* 允许在单词内换行 */
  word-break: keep-all; /* 只能在半角空格或连字符处换行 */
}
  • normal: 保持默认的断行行为
  • break-all: 允许在单词内换行
  • keep-all: 防止在中文、日文和韩文文本中的单词断开

7.4 text-decoration

.text-decoration {
    
    
  text-decoration-line: underline; /* 下划线 */
  text-decoration-style: solid; /* 实线 */
  text-decoration-color: blue; /* 颜色 */
}
  • text-decoration-line: 设置文本装饰的线条位置，如 underline, overline, line-through, 或 blink
  • text-decoration-style: 设置文本装饰的线条样式，如 solid, double, dotted, dashed, 或 wavy
  • text-decoration-color: 设置文本装饰的颜色

7.5 white-space

.white-space {
    
    
  white-space: normal; /* 默认值，合并空白符序列，但保留换行符 */
  white-space: nowrap; /* 防止文本换行 */
  white-space: pre; /* 保留空白符和换行符 */
  white-space: pre-wrap; /* 保留空白符序列，但正常换行 */
  white-space: pre-line; /* 合并空白符序列，但保留换行符 */
}

  • normal: 连续的空白符会被合并，换行符也会被当作空白符来处理。文本会在需要时换行

  • nowrap: 防止文本换行，直到遇到 <br> 标签为止

  • pre: 保留空白符和换行符，文本的行为类似于 <pre> 标签

  • pre-wrap: 保留空白符序列，但是允许文本正常换行

  • pre-line: 合并空白符序列，但保留换行符

white-space属性对于控制文本格式非常有用，特别是在处理诗歌、代码块或任何需要精确控制空白的文本时。例如，如果你不希望合并多个空格或忽略换行，可以使用 pre 或 pre-wrap 值。如果你希望文本始终在一行显示，可以使用 nowrap

8. 新增渐变

视频教程：177_CSS3_新增渐变

CSS3引入了两种类型的渐变：线性渐变（linear-gradient）和径向渐变（radial-gradient）。这些渐变可以用于背景图像，为网页元素提供平滑的颜色过渡效果

8.1 线性渐变（linear-gradient）

线性渐变是指沿着一条直线逐渐过渡两个或多个颜色。以下是一个线性渐变的示例：

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

这会创建一个从左到右的渐变，从红色过渡到黄色。也可以指定角度，例如：

.linear-gradient {
    
    
  background-image: linear-gradient(45deg, red, yellow);
}

这会创建一个从左下角到右上角的渐变

还可以添加多个颜色停止点（color stops）：

.linear-gradient {
    
    
  background-image: linear-gradient(to right, red, orange 20%, yellow 40%, green 60%, blue 80%);
}

这里，颜色会在指定的百分比位置开始过渡

8.2 径向渐变（radial-gradient）

径向渐变是指从中心点向外（或向内）逐渐过渡两个或多个颜色。以下是一个径向渐变的示例：

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

这会创建一个从中心点开始，颜色从红色过渡到黄色，再到绿色的圆形渐变

8.3 重复渐变（repeating-linear-gradient）

.repeating-linear-gradient {
    
    
  background-image: repeating-linear-gradient(45deg, red, red 10px, yellow 10px, yellow 20px);
}
.repeating-radial-gradient {
    
    
  background-image: repeating-radial-gradient(circle, red, red 10px, yellow 10px, yellow 20px);
}

创建了重复的线性渐变和径向渐变，颜色在指定的长度内重复

9. Web字体

视频教程：178_CSS3_web字体_字体图标

CSS3引入了@font-face规则，它允许网页设计师使用在线字体，而不仅仅限于用户计算机上已经安装的字体。这意味着设计师可以使用更多样化的字体，而不必担心它们是否在用户的系统中可用

9.1 使用@font-face的步骤

  1. 选择字体文件：首先，你需要选择你想要使用的字体文件。通常，你会需要不同格式的字体文件来确保跨浏览器的兼容性。常见的字体格式包括.woff, .woff2, .ttf, .otf, .eot和.svg
  2. 在服务器上托管字体文件：将字体文件上传到你的服务器，或者使用CDN服务
  3. 定义@font-face规则：在CSS中，使用@font-face规则来定义字体名称和来源
  4. 使用定义的字体：在CSS的其他部分，你可以像使用常规字体一样使用@font-face中定义的字体

9.2 @font-face示例

@font-face {
    
    
  font-family: 'MyCustomFont';
  src: url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff'),
       url('path/to/font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* 使用自定义字体 */
body {
    
    
  font-family: 'MyCustomFont', Fallback, sans-serif;
}

在这个例子中：

  • font-family：定义了一个字体名称，你可以随意命名
  • src：指定了字体文件的路径和格式。列出多个格式是为了兼容不同的浏览器
  • format：指示了字体的格式，这对于浏览器来说是很重要的，因为它需要知道如何解析字体文件
  • font-weight和font-style：定义了字体的粗细和样式。你可以根据实际的字体文件提供不同的变体

9.3 注意事项

  • 版权问题：在使用任何字体之前，请确保你有权利将其用于网页上。许多字体是受版权保护的，可能需要购买许可
  • 性能考虑：字体文件可能很大，过多的使用或不当的使用可能会影响页面的加载时间。确保只加载需要的字体样式和权重
  • 兼容性：虽然大多数现代浏览器都支持@font-face，但为了更好的兼容性，列出多个字体格式仍然是一个好习惯

阿里巴巴提供的字体：https://www.iconfont.cn/fonts/index?spm=a313x.7781068.0.0&type=3

在这里插入图片描述

10. 字体图标

CSS3中的字体图标是通过使用@font-face规则和特定的图标字体库来实现的。字体图标是一种将图标作为字体来使用的技术，这样就可以像操作文字一样操作图标，包括改变颜色、大小、阴影等效果，而不需要使用图片

10.1 字体图标的优点

  • 可缩放性：字体图标可以无损地放大或缩小，不会失真
  • 灵活性：可以像文本一样通过CSS进行样式定制
  • 兼容性：支持所有现代浏览器，并且可以很好地与响应式设计配合
  • 减少HTTP请求：使用字体图标可以减少页面的HTTP请求，因为多个图标可以包含在一个字体文件中

10.2 字体图标的缺点

  • 渲染问题：在某些浏览器或操作系统上，字体图标的渲染可能会有轻微的不同
  • 字体加载：如果字体文件很大，可能会影响页面的加载速度

10.3 使用字体图标示例

视频教程：178_CSS3_web字体_字体图标

猜你喜欢

目录

热门文章