五、过渡与动画属性
CSS3的过渡和动画功能是前端开发中极为重要的特性。过渡使元素的状态变化更加平滑自然，而动画则允许开发者创建更加复杂和生动的动态效果，极大地提升了用户体验。
1. transition（过渡属性）
<transition> 属性是一个简写属性，用于定义元素从一种样式逐渐变化到另一种样式时的过渡效果。该属性包含四个子属性：<transition-property>（指定要过渡的CSS属性）、<transition-duration>（指定过渡持续的时间）、<transition-timing-function>（指定过渡的速度曲线）和 <transition-delay>（指定过渡开始前的延迟时间）。多个属性可以同时进行过渡，彼此之间用逗号分隔。
.button {
background-color: blue;
/* 简写形式：属性 时长 缓动函数 延迟 */
transition: background-color 0.3s ease-in-out 0.1s;
}
.button:hover {
background-color: red;
}
/* 多属性同时过渡 */
.card {
transition: transform 0.5s, opacity 0.3s;
}
.card:hover {
transform: scale(1.1);
opacity: 0.8;
}
/* 所有可过渡属性一起过渡 */
.all-transition {
transition: all 0.4s ease;
}
/* 分别设置各个子属性 */
.detailed-transition {
transition-property: width, height;
transition-duration: 0.5s, 0.3s;
transition-timing-function: ease-in, linear;
transition-delay: 0s, 0.2s;
}2. @keyframes与animation（关键帧动画属性）
<@keyframes> 规则用于定义动画的关键帧序列，开发者可以在动画过程中设置多个状态点，每个状态点可以定义不同的样式。<animation> 属性则用于将定义好的动画应用到具体的元素上，并控制动画的播放方式，包括播放时长、播放次数、播放方向、结束状态等。动画属性同样是一个简写属性，包含 <animation-name>、<animation-duration>、<animation-timing-function>、<animation-delay>、<animation-iteration-count>、<animation-direction>、<animation-fill-mode> 和 <animation-play-state> 等多个子属性。
/* 定义一个名为slideIn的动画 */
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
/* 定义一个弹跳动画 */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
}
/* 定义一个颜色渐变动画 */
@keyframes colorShift {
0% {
background-color: red;
}
50% {
background-color: yellow;
}
100% {
background-color: blue;
}
}
/* 应用动画：播放一次并保持结束状态 */
.animated-box {
animation: slideIn 1s ease-out forwards;
}
/* 无限循环播放弹跳动画 */
.bouncing-ball {
animation: bounce 0.8s infinite;
}
/* 动画简写属性的完整形式 */
.full-animation {
animation: colorShift 3s ease-in-out 0.5s infinite alternate both;
}
/* 分别设置动画子属性 */
.detailed-animation {
animation-name: slideIn;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0.3s;
animation-iteration-count: 2;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;
}六、布局相关新增属性
CSS3在页面布局方面带来了革命性的变化，尤其是弹性盒模型（Flexbox）和网格布局（Grid）的引入，彻底改变了传统的布局方式，使开发者能够更加高效地实现复杂的页面结构。
1. box-sizing（盒模型属性）
<box-sizing> 属性用于改变CSS盒模型的计算方式。默认值为 <content-box>，此时元素的宽度和高度只包含内容区域，不包含内边距和边框。当设置为 <border-box> 时，元素的宽度和高度会包含内边距和边框，这使得尺寸计算更加直观，尤其适合响应式布局。在实际项目中，很多开发者会全局设置 <box-sizing: border-box>，以避免频繁计算尺寸带来的麻烦。
/* 全局设置所有元素使用border-box盒模型 */
* {
box-sizing: border-box;
}
/* 标准盒模型：width只包含内容区域 */
.content-box {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 5px solid black;
/* 实际占据宽度：300 + 40 + 10 = 350px */
}
/* 怪异盒模型：width包含内边距和边框 */
.border-box {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid black;
/* 实际占据宽度：300px，内容区宽度为300 - 40 - 10 = 250px */
}2. Flexbox（弹性盒布局）
Flexbox是CSS3引入的一种高效的一维布局模型，特别适合处理行内元素或列内元素的排列、对齐和空间分配。Flexbox布局通过设置容器的 <display: flex> 来启用，然后可以使用 <flex-direction>、<justify-content>、<align-items>、<flex-wrap>、<gap> 等属性来控制子项目的排列方式。对于子项目本身，可以使用 <flex>、<align-self>、<order> 等属性进行单独控制。
/* 容器属性：启用Flexbox布局 */
.flex-container {
display: flex;
flex-direction: row; /* 主轴方向：水平排列 */
justify-content: center; /* 主轴对齐方式：居中 */
align-items: center; /* 交叉轴对齐方式：居中 */
flex-wrap: wrap; /* 允许换行 */
gap: 20px; /* 项目之间的间距 */
}
/* 容器属性：垂直排列 */
.flex-column {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
/* 项目属性：设置项目的伸缩比例和初始大小 */
.flex-item {
flex: 1 1 200px;
/* 等价于：flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
}
/* 项目属性：单独设置对齐方式 */
.flex-item-self {
align-self: flex-start;
}
/* 项目属性：设置排列顺序 */
.flex-item-order {
order: 2;
}3. Grid（网格布局）
CSS Grid是CSS3中功能最为强大的二维布局系统，它可以同时处理行和列，让开发者能够精确控制页面中每个网格单元的大小和位置。通过 <display: grid> 启用网格布局后，可以使用 <grid-template-columns>、<grid-template-rows>、<gap>、<grid-template-areas> 等属性定义网格的结构，然后通过 <grid-column>、<grid-row> 或 <grid-area> 属性将子项目放置在指定的网格位置。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
grid-template-rows: auto 200px; /* 第一行自动高度，第二行200px */
gap: 15px; /* 网格间距 */
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.grid-item-header {
grid-area: header;
}
.grid-item-sidebar {
grid-area: sidebar;
}
.grid-item-main {
grid-area: main;
}
.grid-item-footer {
grid-area: footer;
}
/* 使用列和行线来定位 */
.grid-item-custom {
grid-column: 1 / 3;
grid-row: 2 / 4;
}
/* 自动填充与自动适应 */
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}4. Multi-column（多列布局属性）
<columns> 相关属性允许开发者将文本内容分割成多列，形成类似报纸或杂志的排版效果。常用的多列属性包括 <column-count>（指定列数）、<column-width>（指定列宽）、<column-gap>（指定列间距）和 <column-rule>（指定列之间的分隔线样式）。多列布局特别适合展示长篇幅的文本内容，可以显著提高阅读体验。
/* 将内容分割为3列 */
.multi-column {
column-count: 3;
column-gap: 40px;
column-rule: 2px solid #ccc;
}
/* 指定列宽，浏览器自动计算列数 */
.multi-column-width {
column-width: 250px;
gap: 30px;
column-rule: 1px dashed #999;
}
/* 简写形式：列宽和列数 */
.multi-column-shorthand {
columns: 200px 4;
}
/* 控制元素跨列显示 */
.span-all {
column-span: all;
}七、颜色与渐变属性
CSS3在颜色表示和渐变效果方面增加了强大的新功能，使开发者能够创建更加丰富和细腻的视觉表现，同时减少对图片资源的依赖。
1. RGBA与HSLA颜色表示法
RGBA和HSLA是在RGB和HSL颜色模型基础上增加了Alpha通道（透明度）的新表示方法。RGBA使用红色、绿色、蓝色和透明度四个通道来表示颜色，而HSLA则使用色相、饱和度、明度和透明度四个通道。这两种颜色表示法让开发者可以精确控制颜色的透明度，实现半透明叠加等效果，而无需借助 <opacity> 属性。
/* RGBA颜色：红色，透明度50% */
.rgba-color {
background-color: rgba(255, 0, 0, 0.5);
color: rgba(0, 0, 0, 0.8);
}
/* HSLA颜色：色相200度，饱和度80%，明度50%，透明度60% */
.hsla-color {
background-color: hsla(200, 80%, 50%, 0.6);
}
/* 在渐变中使用RGBA */
.rgba-gradient {
background: linear-gradient(to right, rgba(255,0,0,0.8), rgba(0,0,255,0.2));
}2. 渐变（Gradient）
CSS3支持线性渐变和径向渐变两种基本渐变类型，以及对应的重复渐变版本。线性渐变沿着一条直线方向进行颜色过渡，径向渐变则从一个中心点向外扩散进行颜色过渡。渐变可以设置多个颜色节点，并且可以控制每个节点的位置和颜色值，从而生成平滑的色彩过渡效果，完全无需使用背景图片。
/* 线性渐变：从左到右，三种颜色过渡 */
.linear-gradient {
background: linear-gradient(to right, red, yellow, green);
}
/* 带角度的线性渐变：45度方向 */
.linear-angle {
background: linear-gradient(45deg, #ff6b6b, #feca57);
}
/* 径向渐变：从中心向外扩散 */
.radial-gradient {
background: radial-gradient(circle, #ff9a9e, #fad0c4);
}
/* 径向渐变：椭圆形状 */
.radial-ellipse {
background: radial-gradient(ellipse at center, #a8edea, #fed6e3);
}
/* 重复线性渐变：形成条纹图案 */
.repeating-gradient {
background: repeating-linear-gradient(
45deg,
#f06,
#f06 10px,
#fff 10px,
#fff 20px
);
}
/* 重复径向渐变 */
.repeating-radial {
background: repeating-radial-gradient(
circle,
#ff9a9e,
#ff9a9e 10px,
#fad0c4 10px,
#fad0c4 20px
);
}
/* 多颜色节点渐变 */
.multi-stop {
background: linear-gradient(to right, red, orange 20%, yellow 40%, green 60%, blue 80%, purple);
}八、选择器相关新增内容
CSS3新增了大量功能强大的选择器，使开发者能够更加精准和灵活地选取页面元素，减少了在HTML结构和JavaScript脚本中的额外工作。
1. 属性选择器的增强
CSS3在原有属性选择器的基础上，新增了三种匹配模式：以特定值开头的属性选择器（<^=>）、以特定值结尾的属性选择器（<$=>）以及包含特定值的属性选择器（<*=>）。这些选择器让开发者可以根据属性值的局部特征来选取元素，非常实用。
/* 选取href属性值以"https"开头的链接 */
a[href^="https"] {
color: green;
}
/* 选取src属性值以".png"结尾的图片 */
img[src$=".png"] {
border: 2px solid blue;
}
/* 选取class属性值中包含"wrapper"的div元素 */
div[class*="wrapper"] {
padding: 20px;
}
/* 选取title属性值中包含特定单词的元素 */
[title~="featured"] {
font-weight: bold;
}
/* 选取lang属性值以特定语言代码开头的元素 */
[lang|="zh"] {
font-family: "Microsoft YaHei", sans-serif;
}2. 结构伪类选择器
结构伪类选择器可以根据元素在文档树中的位置来选取元素，无需添加额外的类名或ID。常用的结构伪类包括 <:first-child>、<:last-child>、<:nth-child()>、<:nth-of-type()>、<:first-of-type>、<:last-of-type>、<:only-child> 和 <:empty> 等。其中 <:nth-child()> 和 <:nth-of-type()> 接受一个参数，可以是数字、关键字（如 <odd>、<even>）或代数表达式（如 <2n+1>）。
/* 选中父元素中的第一个子元素 */
li:first-child {
font-weight: bold;
}
/* 选中父元素中的最后一个子元素 */
li:last-child {
border-bottom: none;
}
/* 选中父元素中第偶数个子元素（偶数行） */
li:nth-child(2n) {
background-color: #f5f5f5;
}
/* 选中父元素中第奇数个子元素（奇数行） */
li:nth-child(odd) {
background-color: #e9e9e9;
}
/* 选中特定类型的第n个元素 */
p:nth-of-type(3) {
color: red;
}
/* 选中父元素中唯一的子元素 */
span:only-child {
font-size: 1.2em;
}
/* 选中没有子元素的元素 */
div:empty {
display: none;
}
/* 选中第一个指定类型的元素 */
h2:first-of-type {
margin-top: 0;
}
/* 选中最后一个指定类型的元素 */
h2:last-of-type {
border-bottom: 2px solid black;
}
/* 使用代数表达式：选中第2、5、8...个元素 */
li:nth-child(3n+2) {
color: orange;
}3. UI状态伪类选择器
CSS3新增了针对表单元素状态的选择器，包括 <:enabled>（可用状态）、<:disabled>（禁用状态）、<:checked>（选中状态）、<:focus>（聚焦状态）以及 <:required>（必填状态）和 <:optional>（选填状态）等。这些选择器让开发者可以根据表单元素的交互状态来应用不同的样式，提升用户体验。
/* 可用的输入框 */
input:enabled {
background-color: white;
border: 1px solid #ccc;
}
/* 禁用的输入框 */
input:disabled {
background-color: #eee;
cursor: not-allowed;
opacity: 0.6;
}
/* 被选中的复选框或单选按钮 */
input:checked {
outline: 2px solid blue;
}
/* 选中状态的后面兄弟元素 */
input:checked + label {
font-weight: bold;
color: green;
}
/* 获得焦点的输入框 */
input:focus {
border-color: #4a90d9;
box-shadow: 0 0 5px rgba(74, 144, 217, 0.5);
outline: none;
}
/* 必填字段 */
input:required {
border-left: 3px solid red;
}
/* 选填字段 */
input:optional {
border-left: 3px solid green;
}
/* 有效输入 */
input:valid {
border-color: green;
}
/* 无效输入 */
input:invalid {
border-color: red;
}