课程简介

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

课程须知

需要掌握前端基础知识

你能学到什么

CSS3样式的实现

适用人群

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

作者

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

课程介绍

CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它在CSS2的基础上带来了许多新的特性和功能，以下是CSS3进阶内容介绍：

一、选择器

• 属性选择器（Attribute Selectors）属性选择器允许根据元素的属性值来选择元素。例如，[attribute]选择具有指定属性的所有元素，[attribute=value]选择属性等于特定值的元素，[attribute^=value]选择属性值以特定值开头的元素，[attribute$=value]选择属性值以特定值结尾的元素，[attribute*=value]选择属性值包含特定值的元素。这在处理自定义属性或者针对具有特定属性值的元素进行样式设置时非常有用。比如，可以使用input[type="text"]来选择所有类型为文本的输入框，并为它们设置统一的样式。

• 伪类选择器（Pseudo - classes）

• 动态伪类：如:hover（鼠标悬停）、:active（元素被激活，如点击鼠标时）、:focus（元素获得焦点，如表单元素被选中时）等。这些伪类可以用于创建交互性的样式效果。例如，使用a:hover可以在鼠标悬停在链接上时改变链接的颜色、背景等样式，增强用户体验。

• 结构伪类：像:nth - child()、:nth - last - child()、:first - child、:last - child等。它们根据元素在文档结构中的位置来选择元素。例如，:nth - child(2n)可以选择每个父元素下的偶数个子元素，常用于创建斑马条纹样式的表格或列表。

• 伪元素选择器（Pseudo - elements）伪元素用于向页面中的元素添加特殊效果，如::before和::after。它们可以在元素内容的前面或后面插入生成的内容，并对其进行样式设置。例如，可以使用::before在段落前添加一个装饰性的图标，或者使用::after在引用内容后添加引用标记。这些伪元素在创建复杂的页面布局和装饰效果时非常有用。

二、盒模型相关的新特性

• 盒阴影（Box - Shadows）盒阴影可以为元素添加阴影效果，增强元素的立体感。可以通过指定水平偏移量、垂直偏移量、模糊半径、扩散半径和颜色等参数来控制阴影的外观。例如，box - shadow: 2px 2px 5px rgba(0,0,0,0.3);会在元素右下角产生一个轻微模糊的黑色阴影，使元素看起来像是浮在页面上，常用于按钮、卡片等元素的样式设计。

• 边框半径（Border - Radius）边框半径允许将元素的边框角设置为圆形或椭圆形，实现圆角效果。可以分别指定每个角的半径，也可以使用一个值来同时设置四个角。这在创建圆形按钮、卡片等具有柔和边缘的元素时非常方便。例如，border - radius: 5px;可以将元素的四个角都设置为半径为5像素的圆角。

三、背景和渐变

• 多背景（Multiple Backgrounds）CSS3支持在一个元素上设置多个背景图像，可以分别指定每个背景图像的位置、大小、重复方式等。这为创建复杂的背景效果提供了更多的可能性。例如，可以在一个div元素上设置一个背景图像作为主背景，再设置一个半透明的图案图像作为叠加背景，通过调整它们的属性来实现独特的视觉效果。

• 渐变（Gradients）

• 线性渐变（Linear Gradients）：可以创建从一个颜色到另一个颜色（或多个颜色）沿直线方向变化的渐变效果。例如，background: linear - gradient(to right, red, blue);会创建一个从红色到蓝色的水平线性渐变作为元素的背景。

• 径向渐变（Radial Gradients）：产生从中心向外辐射的颜色渐变效果。可以指定渐变的圆心位置、半径大小以及颜色变化等参数。比如，background: radial - gradient(circle, yellow, green);会创建一个以圆心为中心，从黄色到绿色的圆形径向渐变背景。渐变在创建按钮、导航栏等具有动态和吸引人的背景效果时广泛应用。

四、2D/3D 转换（Transforms）

• 2D 转换

• 平移（Translate）：使用translate()函数可以在水平和垂直方向上移动元素。例如，transform: translate(50px, 100px);会将元素从原来的位置向右移动50像素，向下移动100像素。这在实现元素的动画效果或调整元素位置时很有用。

• 旋转（Rotate）：rotate()函数用于围绕元素的中心旋转元素。如transform: rotate(45deg);会将元素顺时针旋转45度，可用于创建旋转的图标或动态效果。

• 缩放（Scale）：通过scale()函数可以放大或缩小元素。例如，transform: scale(1.5);会将元素在水平和垂直方向上都放大1.5倍，常用于创建放大效果或响应式设计中的元素调整。

• 倾斜（Skew）：skew()函数使元素在水平或垂直方向上倾斜一定的角度，如transform: skew(30deg, 0);会使元素在水平方向上倾斜30度。

• 3D 转换CSS3引入了3D转换功能，包括3D平移（translate3d()、translateX()、translateY()、translateZ()）、3D旋转（rotate3d()、rotateX()、rotateY()、rotateZ()）和3D缩放（scale3d()、scaleX()、scaleY()、scaleZ()）等。这些功能可以创建更加复杂的3D效果，如3D立方体、旋转的3D模型等。不过3D转换在性能方面需要更多的考虑，不当使用可能会导致页面卡顿。

五、过渡（Transitions）和动画（Animations）

• 过渡（Transitions）过渡用于在元素的两个状态之间创建平滑的动画效果。可以指定要过渡的属性、过渡的持续时间、过渡的时间函数（如线性、 ease - in、ease - out等）和延迟时间。例如，当鼠标悬停在一个按钮上时，可以使用过渡来实现按钮颜色的平滑变化。代码示例：transition: background - color 0.5s ease;表示当背景颜色属性发生变化时，在0.5秒内以ease时间函数进行过渡。

• 动画（Animations）动画是CSS3中更强大的功能，它允许创建复杂的、可重复的动画序列。可以通过@keyframes规则定义动画的关键帧，指定在不同时间点元素的样式变化，然后将动画应用到元素上。例如，可以创建一个动画，使一个元素从左边移动到右边，然后再返回，不断重复这个过程。动画在创建网页的加载动画、交互式元素的动态效果等方面应用广泛。

六、弹性盒子布局（Flexbox）

• 基本概念弹性盒子布局是一种用于在容器中布局子元素的新方式。它提供了一种更灵活的方法来分配空间和对齐元素。使用display: flex;或display: inline - flex;可以将一个元素设置为弹性容器。在弹性容器中，子元素（弹性项目）可以根据设置的规则在水平或垂直方向上自动调整大小和位置。

• 主要属性

• 主轴和交叉轴属性：可以使用flex - direction来指定主轴的方向（如row表示水平方向，column表示垂直方向），使用justify - content来控制子元素在主轴上的对齐方式（如center表示居中对齐，space - between表示两端对齐，中间均匀分布），使用align - items和align - self来控制子元素在交叉轴上的对齐方式。

• 弹性项目属性：例如flex - grow、flex - shrink和flex - basis等属性可以控制弹性项目在容器中的伸缩比例和初始大小，从而实现灵活的布局效果。弹性盒子布局在创建响应式网页布局、导航栏、卡片式布局等方面非常实用，可以替代传统的浮动布局和表格布局方式。

七、网格布局（Grid）

• 基本概念网格布局将网页划分为行和列的网格，可以更精确地控制元素在页面中的位置。通过定义网格容器和网格项目，可以创建复杂的页面布局。使用display: grid;可以将一个元素设置为网格容器。

• 主要属性

• 定义网格结构：可以使用grid - template - rows和grid - template - columns来指定网格的行高和列宽。例如，grid - template - rows: 100px 200px;表示网格有两行，高度分别为100像素和200像素。

• 放置网格项目：使用grid - row和grid - column属性可以指定网格项目在网格中的起始和结束位置。此外，还有grid - area等属性用于更方便地放置和管理网格项目。网格布局在创建复杂的网页布局，如多栏布局、响应式设计中的页面分区等方面具有很大的优势，可以实现高度精确的布局控制。