课程简介

CSS3是跟HTML5搭配的技术，可以对编写的网页样式实现修饰，实现网页的界面排版和美化。

课程须知

需要掌握前端基础知识

你能学到什么

CSS3样式的实现

适用人群

前端开发工程师、对前端感兴趣的同学

作者

一个热爱技术，热爱分享技术的极客。我的公众号：琉忆编程库。欢迎关注我，每天获取最新博文。

课程介绍

以下是 CSS3 高级特性的详细介绍：

一、滤镜（Filters）

• 基本原理与用途CSS3 滤镜允许对元素的外观进行各种视觉效果的修改，就像在图像编辑软件中应用滤镜一样。这些滤镜可以用于图像、文本、视频等各种元素，为网页设计增添独特的视觉效果。例如，可以对一张图片使用模糊滤镜，或者让文本看起来有发光的效果。

• 常见滤镜函数

• 模糊（blur）：filter: blur(5px);会使元素产生模糊效果，参数值越大，模糊程度越高。可以用于创建焦点效果或者模拟物体运动的残影。

• 亮度（brightness）：filter: brightness(150%);用于调整元素的亮度。值大于 100%会增加亮度，小于 100%则降低亮度，可用于创建高光或暗光效果。

• 对比度（contrast）：filter: contrast(200%);改变元素的对比度。高对比度可以使图像更加鲜明，低对比度则使图像看起来更柔和。

• 灰度（grayscale）：filter: grayscale(50%);将元素转换为灰度图像，参数值表示灰度的程度，100%时元素完全变为灰色，可用于创建复古或特殊氛围的效果。

• 色相旋转（hue - rotate）：filter: hue - rotate(90deg);旋转元素的色相，可用于创建色彩变换的动态效果，常用于一些需要强调色彩变化的设计场景。

• 饱和度（saturation）：filter: saturation(200%);调整元素的饱和度。高饱和度使颜色更加鲜艳，低饱和度则使颜色更暗淡。

• 阴影（drop - shadow）：filter: drop - shadow(2px 2px 5px rgba(0,0,0,0.5));为元素添加阴影效果，其参数与盒阴影类似，但滤镜的阴影效果更简洁，常用于创建文字或图像的立体效果。

二、混合模式（Blend Modes）

• 混合模式概念混合模式决定了两个重叠元素如何相互作用，产生新的视觉效果。它类似于在图像编辑中图层的混合模式，在 CSS3 中可以应用于背景图像、前景元素等的混合。例如，当一个半透明的元素覆盖在另一个元素上时，可以通过混合模式来决定它们融合的效果。

• 常见混合模式类型

• 正常（normal）：这是默认模式，上层元素完全覆盖下层元素。

• 正片叠底（multiply）：将上下层元素的颜色值相乘，结果通常是使颜色变暗，常用于模拟阴影或加深颜色效果。

• 滤色（screen）：与正片叠底相反，结果通常使颜色变亮，类似两个幻灯片同时投影在屏幕上的效果。

• 叠加（overlay）：根据下层元素的颜色值，对上层元素进行正片叠底或滤色操作，综合了两者的效果，可增强图像的对比度。

• 柔光（soft - light）：根据上层元素的颜色值来决定是变亮还是变暗下层元素，产生柔和的光线效果，类似于用一个柔和的光源照射在图像上。

• 强光（hard - light）：类似柔光，但效果更强烈，产生更鲜明的对比效果。

• 差值（difference）：用上层元素的颜色值减去下层元素的颜色值（或相反），产生色彩对比强烈的效果，常用于创建独特的视觉效果或突出变化。

• 排除（exclusion）：与差值类似，但效果更柔和，产生的颜色对比没有差值模式那么强烈。

三、形状（Shapes）外轮廓（Outlines）

• CSS 形状（CSS Shapes）

• 基本概念：CSS 形状允许我们突破传统的矩形布局，根据指定的形状来包裹文本或其他内容。例如，可以创建一个圆形或多边形的文本环绕效果，使网页设计更加灵活和富有创意。

• 实现方式：可以使用shape - outside属性结合circle()、polygon()等函数来定义形状。例如，shape - outside: circle(50%);可以让文本围绕一个圆形排列，其中50%表示圆形的半径占元素宽度或高度的比例（以较小值为准）。

• 外轮廓（Outlines）

• 与边框的区别：外轮廓是在元素周围绘制的一条线，它与边框不同，外轮廓不占用元素的布局空间，并且可以有多种样式。外轮廓常用于在元素获得焦点或处于特定状态时突出显示元素，而不影响元素的实际尺寸和布局。

• 属性设置：可以使用outline - style（设置轮廓样式，如实线、虚线等）、outline - width（设置轮廓宽度）、outline - color（设置轮廓颜色）以及outline - offset（设置轮廓与元素边缘的距离）等属性来定制外轮廓的外观。例如，outline: 2px solid red;会为元素添加一个 2 像素宽的红色实线轮廓。

四、响应式图像（Responsive Images）

• 问题背景在不同设备（如桌面显示器、平板电脑、手机）上浏览网页时，图像需要根据设备的屏幕尺寸和分辨率进行自适应调整，以保证良好的视觉效果和性能。传统的图像加载方式可能会导致在小屏幕设备上加载大尺寸图像，浪费带宽和加载时间，或者在高分辨率屏幕上图像显示模糊。

• 解决方案

• srcset 和 sizes 属性：srcset属性允许为图像指定多个不同分辨率的源文件，浏览器会根据设备的屏幕分辨率和显示密度自动选择最合适的图像进行加载。例如：<img src="image - small.jpg" srcset="image - medium.jpg 1.5x, image - large.jpg 2x" sizes="(max - width: 600px) 100vw, 50vw" alt="responsive image">。这里srcset中的1.5x和2x表示不同的分辨率倍数，sizes属性则根据视口宽度来指定图像的显示尺寸。

• 元素：<picture>元素提供了更强大的功能，可以根据不同的条件（如屏幕尺寸、设备方向、媒体查询结果等）选择不同的图像源。例如：

  <picture>
  <source media="(max - width: 600px)" srcset="small - image.jpg">
  <source media="(min - width: 601px) and (max - width: 1000px)" srcset="medium - image.jpg">
  <img src="large - image.jpg" alt="responsive picture">
  </picture>

  在这个例子中，根据屏幕宽度的不同，浏览器会从不同的源加载图像。

五、自定义属性（CSS Variables）

• 基本概念CSS 自定义属性（也称为 CSS 变量）允许我们在 CSS 中定义变量，然后在样式表的其他地方使用这些变量。这使得样式的修改和维护更加方便，尤其是在大型项目或需要频繁调整样式的场景中。例如，可以定义一个主色调变量，然后在整个样式表中使用该变量来设置文本、背景等的颜色，当需要改变主色调时，只需修改这个变量的值即可。

• 定义和使用方法可以使用--variable - name: value;的形式来定义变量，例如--primary - color: blue;。然后在其他属性中使用var(--variable - name)来引用这个变量，如color: var(--primary - color);。变量可以在:root选择器（代表文档的根元素，通常用于全局变量定义）中定义，也可以在特定的选择器内部定义，以实现不同范围的变量作用域。

六、书写模式（Writing Modes）

• 多种书写模式介绍

• 水平 - 垂直书写模式（horizontal - tb）：这是最常见的书写模式，文本从左到右水平排列，多行文本从上到下垂直堆叠，与传统的英语等语言的书写方式一致。

• 垂直 - 水平书写模式（vertical - rl）：文本从上到下垂直排列，行与行之间从右到左排列，常用于一些东亚语言（如传统的中文古籍排版）或特定的设计场景，以营造独特的视觉效果。

• 垂直 - 水平反向书写模式（vertical - lr）：文本也是垂直排列，但行与行之间从左到右排列，这种模式在一些特殊的排版需求或艺术设计中可能会用到。

• 应用场景和属性设置书写模式可以通过writing - mode属性进行设置。例如，writing - mode: vertical - rl;可以将元素内的文本设置为垂直 - 水平书写模式。这在创建具有文化特色的网页排版、设计多语言兼容的界面或者实现独特的艺术设计效果（如模仿古代书法作品的排版）时非常有用。它可以改变文本的布局方向，同时也会影响其他相关的属性，如块级元素的排列方向、内联元素的流动方向等。

七、CSS 片段（CSS Fragment）和 @supports 规则

• CSS 片段（CSS Fragment）

• 概念：CSS 片段是一种将 CSS 样式模块化的方法，它允许我们将一组相关的样式规则封装在一起，便于管理和复用。类似于编程中的函数或代码块，CSS 片段可以在不同的地方被引用和使用。

• 实现方式：虽然 CSS 本身没有像编程语言那样的函数定义语法，但可以通过一些约定和工具来实现类似的效果。例如，使用预处理器（如 Sass、Less）中的混合宏（Mixins）功能来创建可复用的样式片段，或者在纯 CSS 中通过类名的合理组织和继承关系来模拟片段的复用。

• @supports 规则

• 功能：@supports 规则用于检测浏览器是否支持特定的 CSS 属性或值，然后根据检测结果应用相应的样式。这在使用新的 CSS 特性时非常有用，因为不同的浏览器对 CSS3 新特性的支持程度不同。可以使用 @supports 规则来确保在支持特定特性的浏览器中应用新样式，而在不支持的浏览器中提供备用方案。

• 示例：@supports (display: flex) {.container {display: flex;}}，在这个例子中，只有当浏览器支持display: flex属性时，才会将类名为container的元素设置为弹性布局，否则不会应用这个样式，从而保证了网页在不同浏览器中的兼容性。