一、选择器增强
1. 属性选择器扩展
/* 属性值包含指定字符串 */
[class*="test"] { color: red; }
/* 属性值以指定字符串开头 */
[class^="test"] { color: blue; }
/* 属性值以指定字符串结尾 */
[class$="test"] { color: green; }
/* 属性值等于指定值或以该值开头后跟连字符 */
[lang|="en"] { color: purple; }
2. 结构伪类选择器
/* 第n个子元素 */
li:nth-child(3) { background: yellow; }
/* 倒数第n个子元素 */
li:nth-last-child(2) { background: orange; }
/* 奇数/偶数元素 */
tr:nth-child(odd) { background: #eee; }
tr:nth-child(even) { background: #fff; }
/* 第一个/最后一个子元素 */
div:first-child { margin-top: 0; }
div:last-child { margin-bottom: 0; }
/* 第n个特定类型元素 */
p:nth-of-type(2) { font-weight: bold; }
p:nth-last-of-type(1) { color: red; }
/* 唯一子元素 */
div:only-child { border: 2px solid blue; }
p:only-of-type { font-style: italic; }
/* 空元素 */
div:empty { display: none; }
3. UI元素状态伪类
/* 表单元素状态 */
input:enabled { border-color: green; }
input:disabled { opacity: 0.5; }
input:checked { background: yellow; }
/* 表单验证状态 */
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:required { border-left: 3px solid orange; }
input:optional { border-left: 1px solid #ccc; }
/* 范围状态 */
input:in-range { color: green; }
input:out-of-range { color: red; }
/* 读写状态 */
input:read-only { background: #f5f5f5; }
input:read-write { background: white; }
4. 否定伪类
/* 排除特定元素 */
div:not(.special) { opacity: 0.8; }
li:not(:first-child) { border-top: 1px solid #ddd; }
5. 目标伪类
/* 锚点目标 */
:target {
background-color: yellow;
padding: 20px;
}
二、盒模型增强
1. box-sizing 属性
/* 传统盒模型 - 宽度不包括padding和border */
div {
box-sizing: content-box; /* 默认值 */
width: 300px;
padding: 20px; /* 实际宽度 = 300 + 40 = 340px */
border: 5px solid black; /* 实际宽度 = 300 + 40 + 10 = 350px */
}
/* 现代盒模型 - 宽度包括padding和border */
div {
box-sizing: border-box; /* 推荐使用 */
width: 300px;
padding: 20px; /* 内容宽度 = 300 - 40 = 260px */
border: 5px solid black; /* 内容宽度 = 300 - 40 - 10 = 250px */
}
/* 全局设置最佳实践 */
*,
*::before,
*::after {
box-sizing: border-box;
}
2. resize 属性
/* 允许用户调整元素大小 */
textarea {
resize: both; /* 水平垂直都可调整 */
resize: horizontal; /* 仅水平 */
resize: vertical; /* 仅垂直 */
resize: none; /* 不可调整 */
overflow: auto; /* 必须设置overflow不为visible */
}
div.resizable {
resize: both;
overflow: auto;
border: 1px solid #ccc;
min-width: 100px;
min-height: 100px;
}
3. outline-offset 属性
/* 轮廓偏移 */
button:focus {
outline: 2px solid blue;
outline-offset: 4px; /* 轮廓向外偏移4px */
}
input:focus {
outline: 2px dashed orange;
outline-offset: -2px; /* 轮廓向内偏移2px */
}
三、背景与边框
1. 多背景图片
div {
/* 多个背景层叠，第一个在最上面 */
background:
url('top-image.png') top left no-repeat,
url('middle-image.png') center center no-repeat,
url('bottom-image.png') bottom right no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(0,0,0,0.5));
/* 分别设置属性 */
background-image:
url('image1.png'),
url('image2.png');
background-position:
top left,
bottom right;
background-repeat:
no-repeat,
repeat-x;
}
2. background-size 属性
div {
/* 关键字值 */
background-size: cover; /* 完全覆盖容器，可能裁剪图片 */
background-size: contain; /* 完整显示图片，可能留白 */
/* 具体尺寸 */
background-size: 100px 50px; /* 宽 高 */
background-size: 50% 25%; /* 百分比 */
/* 多个背景的不同尺寸 */
background-image: url('img1.png'), url('img2.png');
background-size: 100px auto, cover;
}
3. background-origin 与 background-clip
div {
padding: 20px;
border: 10px dashed rgba(0,0,0,0.3);
/* 背景绘制区域 */
background-clip: border-box; /* 默认，绘制到边框外边缘 */
background-clip: padding-box; /* 绘制到内边距外边缘 */
background-clip: content-box; /* 绘制到内容框边缘 */
background-clip: text; /* 实验性，绘制到文字 */
/* 背景定位区域 */
background-origin: padding-box; /* 默认，从内边距区域开始 */
background-origin: border-box; /* 从边框区域开始 */
background-origin: content-box; /* 从内容区域开始 */
}
4. 边框圆角 (border-radius)
div {
/* 基本用法 */
border-radius: 10px; /* 四个角 */
border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
/* 椭圆形圆角 */
border-radius: 50px / 25px; /* 水平半径 / 垂直半径 */
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
/* 创建圆形 */
border-radius: 50%;
width: 100px;
height: 100px;
/* 单独设置每个角 */
border-top-left-radius: 20px;
border-top-right-radius: 10px 30px; /* 水平 垂直 */
}
5. 盒子阴影 (box-shadow)
div {
/* 基本阴影：x偏移 y偏移 模糊半径 扩散半径 颜色 */
box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.3);
/* 内阴影 */
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
/* 多个阴影 */
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 4px 8px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1);
/* 创建边框效果（替代border，不占空间） */
box-shadow: 0 0 0 2px blue; /* 扩散半径作为边框 */
}
6. 边框图片 (border-image)
div {
border: 20px solid transparent;
/* 简写形式 */
border-image: url('border.png') 30 30 30 30 stretch;
/* 拆分形式 */
border-image-source: url('border.png');
border-image-slice: 30; /* 切割图片的9个区域 */
border-image-width: 20px; /* 边框宽度 */
border-image-outset: 0; /* 边框图像向外扩展 */
/* 重复方式 */
border-image-repeat: stretch; /* 拉伸（默认） */
border-image-repeat: repeat; /* 平铺 */
border-image-repeat: round; /* 平铺并缩放 */
border-image-repeat: space; /* 平铺并添加间隔 */
}
四、颜色与渐变
1. 新颜色表示法
div {
/* RGBA - 带透明度 */
background-color: rgba(255, 0, 0, 0.5); /* 红色，50%透明度 */
/* HSLA - 色相、饱和度、亮度、透明度 */
background-color: hsla(240, 100%, 50%, 0.3); /* 蓝色，30%透明度 */
/* 透明关键字 */
background-color: transparent;
/* currentColor关键字 */
border: 2px solid currentColor; /* 使用当前文字颜色 */
}
2. 线性渐变 (linear-gradient)
div {
/* 基本渐变 */
background: linear-gradient(red, blue);
/* 指定方向 */
background: linear-gradient(to right, red, blue); /* 从左到右 */
background: linear-gradient(45deg, red, blue); /* 45度角 */
background: linear-gradient(to bottom right, red, blue); /* 对角线 */
/* 多个颜色点 */
background: linear-gradient(to right, red, yellow 25%, blue 75%, purple);
/* 重复线性渐变 */
background: repeating-linear-gradient(
45deg,
yellow 0px,
yellow 10px,
black 10px,
black 20px
);
}
3. 径向渐变 (radial-gradient)
div {
/* 基本径向渐变 */
background: radial-gradient(red, blue);
/* 指定形状和大小 */
background: radial-gradient(circle, red, blue); /* 圆形 */
background: radial-gradient(ellipse, red, blue); /* 椭圆形（默认） */
background: radial-gradient(circle at 20% 80%, red, blue); /* 指定圆心位置 */
/* 指定大小 */
background: radial-gradient(closest-side circle, red, blue);
/* closest-side | closest-corner | farthest-side | farthest-corner */
/* 重复径向渐变 */
background: repeating-radial-gradient(
circle,
yellow 0px,
yellow 10px,
black 10px,
black 20px
);
}
4. 锥形渐变 (conic-gradient)
div {
/* 基本锥形渐变 */
background: conic-gradient(red, yellow, green, blue, red);
/* 指定起始角度和圆心 */
background: conic-gradient(from 45deg, red, yellow, green);
background: conic-gradient(at 25% 25%, red, yellow, green);
/* 色轮 */
background: conic-gradient(
red, yellow, lime, aqua, blue, magenta, red
);
/* 饼图效果 */
background: conic-gradient(
red 0deg 90deg,
blue 90deg 180deg,
green 180deg 270deg,
yellow 270deg 360deg
);
}
五、文本效果
1. 文本阴影 (text-shadow)
h1 {
/* 基本阴影：x偏移 y偏移 模糊半径 颜色 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
/* 多个阴影 */
text-shadow:
0 1px 0 #fff, /* 轻微外发光 */
1px 0 0 #ccc,
1px 2px 1px rgba(0,0,0,0.5),
2px 3px 2px rgba(0,0,0,0.3);
/* 文字描边效果 */
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
/* 发光效果 */
text-shadow: 0 0 10px #ff0, 0 0 20px #ff0;
}
2. 文本溢出处理 (text-overflow)
div {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出 */
/* 显示省略号 */
text-overflow: ellipsis;
/* 显示自定义字符串（实验性，兼容性差） */
text-overflow: "---";
/* 多行文本省略号（非标准，但广泛支持） */
display: -webkit-box;
-webkit-line-clamp: 3; /* 显示行数 */
-webkit-box-orient: vertical;
overflow: hidden;
}
3. 文字换行控制
p {
/* 允许长单词换行 */
word-wrap: break-word; /* 兼容性更好 */
overflow-wrap: break-word; /* 新规范 */
/* 强制换行规则 */
word-break: break-all; /* 任意位置断行 */
word-break: keep-all; /* CJK文本中保持单词完整 */
/* 连字符 */
hyphens: auto; /* 自动添加连字符 */
hyphenate-character: "—"; /* 自定义连字符 */
/* 空白处理 */
white-space: pre-wrap; /* 保留空格，正常换行 */
white-space: nowrap; /* 不换行 */
}
4. @font-face 规则
/* 定义自定义字体 */
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap; /* 控制字体加载期间的显示行为 */
}
/* 使用自定义字体 */
body {
font-family: 'MyCustomFont', sans-serif;
}
六、2D/3D 变换
1. 2D 变换
div {
transform: translate(50px, 100px); /* 移动 */
transform: rotate(30deg); /* 旋转 */
transform: scale(2, 0.5); /* 缩放 */
transform: skew(20deg, 10deg); /* 倾斜 */
/* 多重变换（顺序很重要） */
transform: translate(50px, 50px) rotate(45deg) scale(1.5);
/* 变换原点 */
transform-origin: 0 0; /* 左上角 */
transform-origin: 100% 100%; /* 右下角 */
transform-origin: center center; /* 中心（默认） */
}
2. 3D 变换
.container {
perspective: 1000px; /* 3D透视距离 */
perspective-origin: 50% 50%; /* 透视原点 */
}
.box {
/* 3D变换 */
transform: translate3d(100px, 100px, 100px);
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
transform: scale3d(1.5, 1.5, 1.5);
/* 背面可见性 */
backface-visibility: hidden; /* 背面不可见 */
/* 3D变换样式 */
transform-style: preserve-3d; /* 子元素保持3D空间 */
}
3. 变换函数细节
/* 矩阵变换 */
transform: matrix(1, 0, 0, 1, 100, 100); /* 等价于 translate(100px, 100px) */
transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); /* 3D矩阵 */
/* 缩放具体轴 */
transform: scaleX(1.5); /* 仅水平缩放 */
transform: scaleY(0.5); /* 仅垂直缩放 */
transform: scaleZ(2); /* 仅深度缩放 */
/* 移动具体轴 */
transform: translateX(100px);
transform: translateY(-50px);
transform: translateZ(200px);
/* 旋转具体轴 */
transform: rotateX(180deg); /* 绕X轴旋转 */
transform: rotateY(90deg); /* 绕Y轴旋转 */
transform: rotateZ(45deg); /* 绕Z轴旋转 */
七、过渡 (Transition)
1. 基本过渡
button {
background: blue;
transition: background 0.5s ease;
}
button:hover {
background: red; /* 0.5秒内从蓝色过渡到红色 */
}
2. 详细配置
div {
/* 简写形式：属性 持续时间 延迟 时间函数 */
transition: all 0.3s ease 0.1s;
/* 分开设置 */
transition-property: width, height, opacity;
transition-duration: 1s, 0.5s, 0.3s;
transition-timing-function: ease-in, ease-out, linear;
transition-delay: 0s, 0.2s, 0.4s;
/* 多个过渡效果 */
transition:
width 0.3s ease,
height 0.3s ease 0.1s,
background 0.5s linear 0.2s;
}
3. 时间函数
div {
/* 预定义函数 */
transition-timing-function: ease; /* 默认，慢快慢 */
transition-timing-function: linear; /* 匀速 */
transition-timing-function: ease-in; /* 慢开始 */
transition-timing-function: ease-out; /* 慢结束 */
transition-timing-function: ease-in-out; /* 慢开始慢结束 */
/* 贝塞尔曲线 */
transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
/* 步进函数 */
transition-timing-function: steps(5, start); /* 分5步，开始时跳变 */
transition-timing-function: steps(5, end); /* 分5步，结束时跳变 */
}
八、动画 (Animation)
1. 关键帧定义
@keyframes slidein {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes colorchange {
0%, 100% {
background-color: red;
}
33% {
background-color: blue;
}
66% {
background-color: green;
}
}
2. 动画应用
div {
/* 简写形式：名称 持续时间 时间函数 延迟 次数 方向 填充模式 运行状态 */
animation: slidein 3s ease 1s infinite alternate both running;
/* 详细配置 */
animation-name: slidein;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite; /* 无限次 */
animation-direction: alternate; /* 往返播放 */
animation-fill-mode: both; /* 动画前后应用样式 */
animation-play-state: running; /* 运行状态 */
/* 多个动画 */
animation:
slidein 3s ease,
pulse 2s ease-in-out 3s infinite;
}
3. 动画高级属性
div {
/* 动画方向 */
animation-direction: normal; /* 正向播放（默认） */
animation-direction: reverse; /* 反向播放 */
animation-direction: alternate; /* 正向然后反向 */
animation-direction: alternate-reverse; /* 反向然后正向 */
/* 填充模式 */
animation-fill-mode: none; /* 不应用任何样式 */
animation-fill-mode: forwards; /* 保持最后一帧样式 */
animation-fill-mode: backwards; /* 应用第一帧样式（考虑延迟） */
animation-fill-mode: both; /* 同时应用forwards和backwards */
/* 运行状态 */
animation-play-state: running; /* 运行中 */
animation-play-state: paused; /* 暂停 */
}
九、布局系统增强
1. 多列布局
article {
/* 简写形式 */
columns: 3 200px; /* 列数 列宽 */
/* 详细设置 */
column-count: 3; /* 列数 */
column-width: 200px; /* 列宽 */
column-gap: 40px; /* 列间距 */
column-rule: 2px solid #ccc; /* 列间分隔线 */
column-fill: balance; /* 列填充方式 */
/* 跨列元素 */
h2 {
column-span: all; /* 横跨所有列 */
column-span: none; /* 不跨列 */
}
/* 分列符 */
break-inside: avoid; /* 避免在元素内部换列 */
break-before: column; /* 在元素前换列 */
break-after: column; /* 在元素后换列 */
}
2. 弹性盒子 (Flexbox)
.container {
display: flex; /* 或 inline-flex */
/* 主轴方向 */
flex-direction: row; /* 默认，水平 */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
/* 换行 */
flex-wrap: nowrap; /* 默认，不换行 */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* 简写：方向 换行 */
flex-flow: row wrap;
/* 主轴对齐 */
justify-content: flex-start; /* 默认，左对齐 */
justify-content: flex-end; /* 右对齐 */
justify-content: center; /* 居中 */
justify-content: space-between; /* 两端对齐，项目间间隔相等 */
justify-content: space-around; /* 每个项目两侧间隔相等 */
justify-content: space-evenly; /* 项目与项目、项目与边界的间隔相等 */
/* 交叉轴对齐 */
align-items: stretch; /* 默认，拉伸填满 */
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline; /* 基线对齐 */
/* 多行对齐 */
align-content: stretch;
align-content: flex-start;
align-content: center;
align-content: space-between;
align-content: space-around;
}
.item {
/* 顺序 */
order: 1; /* 默认0，数字越小越靠前 */
/* 放大比例 */
flex-grow: 1; /* 默认0，不放大 */
/* 缩小比例 */
flex-shrink: 1; /* 默认1，空间不足时缩小 */
/* 基准大小 */
flex-basis: 100px; /* 默认auto */
/* 简写：放大 缩小 基准 */
flex: 1 1 100px;
flex: auto; /* 相当于 1 1 auto */
flex: none; /* 相当于 0 0 auto */
/* 单个项目对齐方式 */
align-self: auto; /* 继承父容器align-items */
align-self: stretch;
align-self: flex-start;
align-self: center;
align-self: flex-end;
align-self: baseline;
}
3. 网格布局 (Grid)
.container {
display: grid; /* 或 inline-grid */
/* 定义列 */
grid-template-columns: 100px 1fr 2fr; /* 绝对大小 分数单位 */
grid-template-columns: repeat(3, 1fr); /* 重复模式 */
grid-template-columns: [col1] 100px [col2] auto [col3] 100px; /* 命名网格线 */
/* 定义行 */
grid-template-rows: 50px 1fr 50px;
grid-template-rows: minmax(100px, auto);
/* 简写：行 / 列 */
grid-template:
"header header" 50px
"sidebar main" 1fr
"footer footer" 30px
/ 200px 1fr; /* 列定义在斜杠后 */
/* 网格区域命名 */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
/* 间隙 */
gap: 20px; /* 简写：行间隙 列间隙 */
row-gap: 10px;
column-gap: 20px;
/* 对齐方式 */
justify-items: stretch; /* 单元格内容水平对齐 */
align-items: stretch; /* 单元格内容垂直对齐 */
justify-content: start; /* 网格整体水平对齐 */
align-content: start; /* 网格整体垂直对齐 */
/* 自动放置 */
grid-auto-flow: row; /* 默认，逐行填充 */
grid-auto-flow: column; /* 逐列填充 */
grid-auto-flow: row dense; /* 密集填充，尝试填补空白 */
/* 自动生成行列 */
grid-auto-columns: 100px;
grid-auto-rows: minmax(100px, auto);
}
.item {
/* 放置位置 */
grid-column: 1 / 3; /* 从第1列线到第3列线 */
grid-column: span 2; /* 横跨2列 */
grid-column: col2 / col4; /* 使用命名网格线 */
grid-row: 1 / 2;
grid-row: span 3;
/* 简写：行开始 / 列开始 / 行结束 / 列结束 */
grid-area: 1 / 1 / 3 / 3;
grid-area: header; /* 使用命名区域 */
/* 单个项目对齐 */
justify-self: stretch; /* 水平对齐 */
align-self: stretch; /* 垂直对齐 */
}
十、响应式设计
1. 媒体查询
/* 基础语法 */
@media media-type and (media-feature) {
/* CSS规则 */
}
/* 屏幕类型 */
@media screen { } /* 屏幕设备 */
@media print { } /* 打印设备 */
@media speech { } /* 语音合成器 */
/* 视口尺寸 */
@media (max-width: 768px) { /* 最大宽度 */ }
@media (min-width: 1024px) { /* 最小宽度 */ }
@media (width: 768px) { /* 精确宽度 */ }
@media (min-width: 768px) and (max-width: 1024px) { /* 范围 */ }
/* 设备特性 */
@media (orientation: portrait) { /* 竖屏 */ }
@media (orientation: landscape) { /* 横屏 */ }
@media (min-resolution: 2dppx) { /* 高分辨率 */ }
@media (hover: hover) { /* 支持悬停 */ }
@media (pointer: fine) { /* 精确指针（鼠标） */ }
@media (pointer: coarse) { /* 粗糙指针（触摸） */ }
/* 逻辑运算符 */
@media not screen and (color) { /* 非运算 */ }
@media screen, print { /* 或运算 */ }
@media only screen and (min-width: 768px) { /* only关键字，对老浏览器隐藏 */ }
/* 嵌套媒体查询 */
@media screen {
@media (min-width: 768px) {
/* 在768px以上的屏幕设备应用 */
}
}
2. 响应式单位
div {
/* 视口单位 */
width: 100vw; /* 视口宽度的100% */
height: 100vh; /* 视口高度的100% */
font-size: 2vmin; /* 视口宽度和高度的2%中较小者 */
font-size: 2vmax; /* 视口宽度和高度的2%中较大者 */
/* 容器查询单位（实验性） */
width: 100cqw; /* 容器宽度的100% */
height: 100cqh; /* 容器高度的100% */
/* 字符单位 */
width: 20ch; /* 20个"0"字符的宽度 */
/* 根元素相对单位 */
font-size: 1rem; /* 相对于根元素字体大小 */
}
十一、其他重要特性
1. 变量 (Custom Properties)
:root {
/* 定义变量 */
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
--spacing: 8px;
--max-width: 1200px;
/* 动态计算 */
--header-height: calc(60px + var(--spacing) * 2);
}
.element {
/* 使用变量 */
color: var(--primary-color);
font-size: var(--font-size);
margin: var(--spacing);
max-width: var(--max-width);
/* 默认值 */
background: var(--secondary-color, #ccc);
/* 在calc中使用 */
padding: calc(var(--spacing) * 2);
/* 动态修改变量 */
--local-color: #ff0000;
color: var(--local-color);
}
/* JS操作CSS变量 */
element.style.setProperty('--primary-color', '#ff0000');
const value = getComputedStyle(element).getPropertyValue('--primary-color');
2. 滤镜 (Filter)
img {
/* 模糊 */
filter: blur(5px);
/* 亮度 */
filter: brightness(150%); /* 更亮 */
filter: brightness(50%); /* 更暗 */
/* 对比度 */
filter: contrast(200%);
/* 灰度 */
filter: grayscale(100%); /* 黑白 */
/* 色相旋转 */
filter: hue-rotate(90deg);
/* 反转颜色 */
filter: invert(100%);
/* 不透明度 */
filter: opacity(50%);
/* 饱和度 */
filter: saturate(200%);
/* 深褐色 */
filter: sepia(100%);
/* 阴影 */
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
/* 多个滤镜 */
filter: contrast(150%) brightness(120%) saturate(150%);
}
/* 背景滤镜 */
.element {
backdrop-filter: blur(10px); /* 背景模糊 */
backdrop-filter: brightness(0.5); /* 背景变暗 */
}
3. 混合模式 (Blend Modes)
/* 背景混合模式 */
.blend {
background-image: url('image1.jpg'), url('image2.jpg');
background-blend-mode: multiply; /* 正片叠底 */
}
/* 混合模式值 */
mix-blend-mode: normal; /* 正常 */
mix-blend-mode: multiply; /* 正片叠底 */
mix-blend-mode: screen; /* 滤色 */
mix-blend-mode: overlay; /* 叠加 */
mix-blend-mode: darken; /* 变暗 */
mix-blend-mode: lighten; /* 变亮 */
mix-blend-mode: color-dodge; /* 颜色减淡 */
mix-blend-mode: color-burn; /* 颜色加深 */
mix-blend-mode: hard-light; /* 强光 */
mix-blend-mode: soft-light; /* 柔光 */
mix-blend-mode: difference; /* 差值 */
mix-blend-mode: exclusion; /* 排除 */
mix-blend-mode: hue; /* 色相 */
mix-blend-mode: saturation; /* 饱和度 */
mix-blend-mode: color; /* 颜色 */
mix-blend-mode: luminosity; /* 亮度 */
4. 裁剪与遮罩
/* 裁剪 (clip-path) */
.element {
/* 基本形状 */
clip-path: circle(50% at 50% 50%); /* 圆形 */
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 菱形 */
clip-path: inset(10% 20% 30% 40%); /* 矩形 */
/* SVG路径 */
clip-path: url(#myClipPath);
/* 过渡动画 */
transition: clip-path 0.5s ease;
}
/* 遮罩 (mask) */
.element {
/* 图片遮罩 */
mask-image: url('mask.png');
/* 渐变遮罩 */
mask-image: linear-gradient(to right, black, transparent);
/* SVG遮罩 */
mask-image: url(#myMask);
/* 遮罩属性 */
mask-mode: alpha; /* 使用alpha通道 */
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
mask-composite: add; /* 遮罩组合方式 */
}
/* 形状外部 */
.element {
shape-outside: circle(50%); /* 文字围绕圆形 */
shape-outside: polygon(0 0, 100% 0, 50% 100%); /* 围绕多边形 */
shape-outside: url('image.png'); /* 围绕图片透明度 */
shape-margin: 10px; /* 形状边距 */
}
十二、CSS函数
1. 计算函数
div {
/* 动态计算 */
width: calc(100% - 100px);
height: calc(50vh + 20px);
font-size: calc(1rem + 1vw);
/* 最小值/最大值 */
width: min(100%, 500px); /* 不超过500px */
height: max(50vh, 300px); /* 至少300px */
width: clamp(200px, 50%, 600px); /* 最小值 理想值 最大值 */
/* 属性函数 */
width: attr(data-width px, 100px); /* 获取元素属性值 */
}
2. 颜色函数
div {
/* RGB函数 */
color: rgb(255 0 0 / 0.5); /* 新语法 */
color: rgb(from #ff0000 r g b / 0.5); /* 相对颜色语法 */
/* HSL函数 */
color: hsl(0 100% 50% / 0.5);
color: hsl(from hsl(0 100% 50%) h s l / 0.5);
/* 颜色混合 */
color: color-mix(in srgb, red 30%, blue 70%);
color: color-mix(in hsl, currentColor 20%, transparent);
/* 颜色对比度 */
color: color-contrast(black vs white, #333, #666);
}
十三、性能优化特性
1. contain 属性
.widget {
/* 限制浏览器样式计算范围 */
contain: layout; /* 布局限制 */
contain: paint; /* 绘制限制 */
contain: size; /* 尺寸限制 */
contain: content; /* layout + paint + size */
contain: strict; /* layout + paint + size + style */
}
2. will-change 属性
.element {
/* 提示浏览器元素将如何变化 */
will-change: transform; /* 将发生变换 */
will-change: opacity; /* 将改变透明度 */
will-change: scroll-position; /* 将滚动 */
will-change: contents; /* 内容将变化 */
/* 谨慎使用，性能消耗大 */
will-change: auto; /* 默认，浏览器自动优化 */
}
十四、实验性特性
1. 容器查询
/* 定义容器 */
.container {
container-type: inline-size; /* 水平尺寸容器 */
container-type: size; /* 水平和垂直尺寸容器 */
container-name: sidebar; /* 命名容器 */
}
/* 容器查询 */
@container (min-width: 500px) {
.element {
/* 当容器宽度≥500px时应用 */
}
}
@container sidebar (max-height: 300px) {
/* 针对特定容器的查询 */
}
2. 子网格
.grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
}
.subgrid {
display: grid;
grid-column: 2 / 7;
grid-template-columns: subgrid; /* 继承父网格列 */
}
3. 层叠上下文控制
.modal {
position: fixed;
z-index: 100;
/* 显式创建层叠上下文 */
isolation: isolate; /* 创建新的层叠上下文 */
}
十五、CSS3 最佳实践
1. 渐进增强
/* 1. 基础样式（所有浏览器） */
.button {
display: inline-block;
padding: 10px 20px;
background: #007bff;
color: white;
text-decoration: none;
}
/* 2. CSS3 增强（现代浏览器） */
@supports (display: flex) or (display: -webkit-flex) {
.button {
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.button:hover {
background: #0056b3;
}
}
/* 3. 高级特性（最新浏览器） */
@supports (backdrop-filter: blur(10px)) {
.modal {
backdrop-filter: blur(10px);
}
}
2. 供应商前缀处理
/* 手动添加 */
.button {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* 使用PostCSS等工具自动添加 */
.button {
transition: all 0.3s ease;
user-select: none;
}
3. 特性检测
/* CSS特性检测 */
@supports (display: grid) {
.container {
display: grid;
}
}
@supports not (display: grid) {
.container {
display: flex;
}
}
@supports (display: grid) and (gap: 20px) {
.container {
gap: 20px;
}
}
总结
CSS3 带来了革命性的变化，让网页设计变得更加灵活和强大。从选择器到布局系统，从动画效果到响应式设计，每个新特性都为开发者提供了更多的可能性。在实际开发中，建议：
- 渐进增强：为不支持新特性的浏览器提供降级方案
- 性能优化：合理使用硬件加速，避免性能问题
- 兼容性考虑：使用特性检测和前缀确保跨浏览器兼容
- 代码维护：使用CSS变量和现代布局系统提高代码可维护性
CSS3仍在不断发展中，保持学习并关注新特性，可以帮助你创建更出色的用户体验。
