css3 新特性

CSS3 新特性全面讲解

CSS3 是 CSS 的第三个主要版本，引入了大量强大的新特性，使网页设计更加丰富和灵活。

一、选择器增强

1. 属性选择器

/* 属性存在选择器 */
a[target] { color: red; }

/* 属性等于特定值 */
input[type="text"] { border: 1px solid #ccc; }

/* 属性值包含特定单词 */
div[class~="warning"] { background: yellow; }

/* 属性值以特定字符串开头 */
a[href^="https"] { color: green; }

/* 属性值以特定字符串结尾 */
a[href$=".pdf"]::after { content: " 📄"; }

/* 属性值包含特定字符串 */
a[href*="google"] { font-weight: bold; }

2. 结构性伪类选择器

/* 第一个子元素 */
li:first-child { color: red; }

/* 最后一个子元素 */
li:last-child { color: blue; }

/* 第n个子元素 */
li:nth-child(3) { font-weight: bold; }

/* 奇数/偶数元素 */
tr:nth-child(odd) { background: #f2f2f2; }
tr:nth-child(even) { background: #fff; }

/* 第n个某种类型的元素 */
p:nth-of-type(2) { font-size: 1.2em; }

/* 唯一子元素 */
div:only-child { border: 2px solid red; }

/* 空元素 */
div:empty { display: none; }

3. UI元素状态伪类

/* 表单元素状态 */
input:enabled { border-color: green; }
input:disabled { opacity: 0.5; }
input:checked + label { color: blue; }

/* 范围验证 */
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:required { border-left: 3px solid orange; }

/* 目标元素 */
section:target { background: #ffa; }

4. 否定伪类

/* 排除特定元素 */
div:not(.special) { opacity: 0.7; }

/* 复杂否定 */
input:not([type="submit"]):not([type="reset"]) {
    width: 200px;
}

二、边框和背景

1. 圆角边框 (border-radius)

/* 基本用法 */
.box {
    border-radius: 10px;  /* 四个角 */
    border-radius: 10px 20px 30px 40px;  /* 左上 右上 右下 左下 */
    border-radius: 50%;  /* 圆形 */
}

/* 椭圆角 */
.ellipse {
    border-radius: 50% / 20%;  /* 水平半径 / 垂直半径 */
}

/* 单个角设置 */
.corner {
    border-top-left-radius: 15px;
    border-bottom-right-radius: 25px;
}

2. 边框图片 (border-image)

.box {
    border: 15px solid transparent;
    border-image: url(border.png) 30 stretch;
    
    /* 简写属性 */
    border-image-source: url(border.png);
    border-image-slice: 30;
    border-image-width: 15px;
    border-image-outset: 0;
    border-image-repeat: stretch;
}

3. 盒子阴影 (box-shadow)

.box {
    /* 基本阴影: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 */
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    
    /* 内阴影 */
    box-shadow: inset 0 0 10px #000;
    
    /* 多重阴影 */
    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);
    
    /* 彩色阴影 */
    box-shadow: 0 0 20px #ff0080;
}

4. 背景增强

.element {
    /* 多重背景 */
    background-image: 
        url(bg1.png),
        url(bg2.png),
        linear-gradient(to bottom, #fff, #000);
    
    /* 背景大小 */
    background-size: 100px 100px, cover, auto;
    
    /* 背景原点 */
    background-origin: padding-box, border-box, content-box;
    
    /* 背景裁剪 */
    background-clip: border-box, padding-box, content-box;
    
    /* 渐变背景 */
    background: linear-gradient(45deg, red, blue);
    background: radial-gradient(circle at center, red, blue);
    background: conic-gradient(from 0deg, red, yellow, green, blue, red);
}

三、渐变

1. 线性渐变 (linear-gradient)

.gradient {
    /* 基本线性渐变 */
    background: linear-gradient(red, blue);
    
    /* 指定方向 */
    background: linear-gradient(to right, red, blue);
    background: linear-gradient(45deg, red, blue);
    
    /* 多个色标 */
    background: linear-gradient(to right, 
        red 0%, 
        orange 25%, 
        yellow 50%, 
        green 75%, 
        blue 100%);
    
    /* 重复渐变 */
    background: repeating-linear-gradient(
        45deg,
        #ff6b6b 0px, #ff6b6b 10px,
        #4ecdc4 10px, #4ecdc4 20px
    );
}

2. 径向渐变 (radial-gradient)

.radial {
    /* 基本径向渐变 */
    background: radial-gradient(red, blue);
    
    /* 指定形状和位置 */
    background: radial-gradient(circle at top left, red, blue);
    background: radial-gradient(ellipse at center, red, blue 50%, green);
    
    /* 指定大小 */
    background: radial-gradient(closest-side circle at 30% 30%, red, blue);
    
    /* 重复径向渐变 */
    background: repeating-radial-gradient(
        circle,
        #ff6b6b 0px, #ff6b6b 10px,
        #4ecdc4 10px, #4ecdc4 20px
    );
}

3. 锥形渐变 (conic-gradient)

.conic {
    /* 基本锥形渐变 */
    background: conic-gradient(red, yellow, green, blue, red);
    
    /* 指定起始角度 */
    background: conic-gradient(from 90deg, red, blue);
    
    /* 指定中心点 */
    background: conic-gradient(at 25% 25%, red, blue);
    
    /* 色标控制 */
    background: conic-gradient(
        red 0deg, red 90deg,
        blue 90deg, blue 180deg,
        green 180deg, green 270deg,
        yellow 270deg, yellow 360deg
    );
}

四、变换 (Transforms)

1. 2D 变换

.transform {
    /* 平移 */
    transform: translate(50px, 100px);
    transform: translateX(50px);
    transform: translateY(100px);
    
    /* 旋转 */
    transform: rotate(45deg);
    
    /* 缩放 */
    transform: scale(1.5);  /* 等比例缩放 */
    transform: scale(1.5, 0.5);  /* 宽高分别缩放 */
    transform: scaleX(1.5);
    transform: scaleY(0.5);
    
    /* 倾斜 */
    transform: skew(30deg, 20deg);
    transform: skewX(30deg);
    transform: skewY(20deg);
    
    /* 组合变换 */
    transform: translate(50px, 100px) rotate(45deg) scale(1.5);
    
    /* 变换原点 */
    transform-origin: top left;
    transform-origin: 50% 50%;  /* 默认值 */
    transform-origin: 100px 200px;
}

2. 3D 变换

.transform-3d {
    /* 3D旋转 */
    transform: rotateX(45deg);
    transform: rotateY(45deg);
    transform: rotateZ(45deg);
    transform: rotate3d(1, 1, 1, 45deg);
    
    /* 3D平移 */
    transform: translate3d(100px, 100px, 100px);
    transform: translateZ(100px);
    
    /* 透视 */
    perspective: 500px;
    transform: perspective(500px) rotateY(45deg);
    
    /* 变换样式 */
    transform-style: preserve-3d;  /* 子元素保持3D */
    backface-visibility: hidden;  /* 背面隐藏 */
}

五、过渡 (Transitions)

.element {
    /* 基本过渡 */
    transition: all 0.3s ease;
    
    /* 详细设置 */
    transition-property: width, height, background-color;
    transition-duration: 0.5s, 0.3s, 0.8s;
    transition-timing-function: ease-in, ease-out, linear;
    transition-delay: 0s, 0.2s, 0.1s;
    
    /* 简写（多个属性） */
    transition: width 0.5s ease-in 0.1s,
                height 0.3s ease-out,
                background-color 0.8s linear;
    
    /* 贝塞尔曲线函数 */
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* 步骤函数 */
    transition-timing-function: steps(4, jump-start);
}

/* 触发过渡 */
.element:hover {
    width: 300px;
    background-color: red;
}

六、动画 (Animations)

1. 关键帧动画

/* 定义动画 */
@keyframes slideIn {
    /* 起始状态 */
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    
    /* 中间状态 */
    50% {
        transform: translateX(10%);
    }
    
    /* 结束状态 */
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* 应用动画 */
.element {
    /* 基本使用 */
    animation: slideIn 1s ease-in-out;
    
    /* 详细设置 */
    animation-name: pulse;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;  /* 无限循环 */
    animation-direction: alternate;  /* 交替播放 */
    animation-fill-mode: both;  /* 动画前后应用样式 */
    animation-play-state: running;  /* 运行/暂停 */
    
    /* 简写 */
    animation: pulse 2s ease-in-out 0.5s infinite alternate both;
}

2. 动画性能优化

.element {
    /* 使用 transform 和 opacity 动画（硬件加速） */
    animation: move 1s;
    
    /* 触发 GPU 加速 */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* 优化性能 */
    will-change: transform, opacity;
}

@keyframes move {
    to {
        transform: translateX(100px);
    }
}

七、Flexbox 布局

1. 容器属性

.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: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
}

2. 项目属性

.item {
    /* 排序 */
    order: 1;  /* 数值越小越靠前，默认0 */
    
    /* 放大比例 */
    flex-grow: 1;  /* 默认0，不放大 */
    
    /* 缩小比例 */
    flex-shrink: 1;  /* 默认1，空间不足时缩小 */
    
    /* 项目基准大小 */
    flex-basis: 200px;  /* 或 auto（默认） */
    
    /* 简写：grow shrink basis */
    flex: 1 1 auto;
    flex: 1;  /* 等价于 1 1 0 */
    flex: none;  /* 等价于 0 0 auto */
    
    /* 单个项目对齐 */
    align-self: auto;      /* 继承容器的 align-items */
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: baseline;
    align-self: stretch;
}

八、Grid 网格布局

1. 容器属性

.container {
    display: grid;  /* 或 inline-grid */
    
    /* 定义列 */
    grid-template-columns: 100px 200px auto;
    grid-template-columns: 1fr 2fr 1fr;  /* 分数单位 */
    grid-template-columns: repeat(3, 100px);  /* 重复模式 */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    
    /* 定义行 */
    grid-template-rows: 100px auto 100px;
    grid-template-rows: repeat(3, minmax(100px, auto));
    
    /* 定义区域 */
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
    
    /* 行列间距 */
    grid-gap: 20px;  /* 简写 */
    grid-row-gap: 10px;
    grid-column-gap: 20px;
    
    /* 对齐 */
    justify-items: start | end | center | stretch;
    align-items: start | end | center | stretch;
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;
    
    /* 自动布局 */
    grid-auto-flow: row;  /* 默认：先行后列 */
    grid-auto-flow: column;  /* 先列后行 */
    grid-auto-flow: row dense;  /* 密集填充 */
    grid-auto-columns: 100px;  /* 隐式网格列大小 */
    grid-auto-rows: 150px;     /* 隐式网格行大小 */
}

2. 项目属性

.item {
    /* 位置 */
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
    
    /* 简写 */
    grid-column: 1 / 3;      /* 列起始/结束 */
    grid-row: 2 / 4;         /* 行起始/结束 */
    grid-column: span 2;     /* 跨越2列 */
    grid-row: span 3;        /* 跨越3行 */
    
    /* 区域 */
    grid-area: header;  /* 使用模板中定义的名称 */
    grid-area: 1 / 1 / 3 / 3;  /* 行始/列始/行末/列末 */
    
    /* 单个项目对齐 */
    justify-self: start | end | center | stretch;
    align-self: start | end | center | stretch;
}

九、响应式设计

1. 媒体查询 (Media Queries)

/* 基本语法 */
@media (max-width: 768px) {
    .container { width: 100%; }
}

/* 多个条件 */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 平板样式 */
}

/* 设备方向 */
@media (orientation: landscape) {
    /* 横屏样式 */
}

@media (orientation: portrait) {
    /* 竖屏样式 */
}

/* 像素密度 */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
    /* 高清屏幕样式 */
}

/* 断点示例 */
/* 手机: < 768px */
/* 平板: 768px - 1024px */
/* 桌面: > 1024px */

@media (max-width: 767px) { /* 手机 */ }
@media (min-width: 768px) and (max-width: 1023px) { /* 平板 */ }
@media (min-width: 1024px) { /* 桌面 */ }

2. 响应式单位

.element {
    /* 视口单位 */
    width: 100vw;        /* 100% 视口宽度 */
    height: 100vh;       /* 100% 视口高度 */
    font-size: 5vmin;    /* 视口较小尺寸的5% */
    font-size: 5vmax;    /* 视口较大尺寸的5% */
    
    /* 容器查询单位（CSS Container Queries） */
    width: 50cqi;        /* 容器内联大小的50% */
    height: 50cqb;       /* 容器块大小的50% */
    font-size: 5cqw;     /* 容器宽度的5% */
    font-size: 5cqh;     /* 容器高度的5% */
}

十、其他重要特性

1. 多列布局

.multicol {
    column-count: 3;            /* 列数 */
    column-width: 200px;        /* 列宽 */
    columns: 3 200px;           /* 简写：count width */
    
    column-gap: 40px;           /* 列间距 */
    column-rule: 1px solid #ccc; /* 列分割线 */
    
    /* 控制内容分列 */
    column-fill: auto;          /* 自动填充 */
    column-fill: balance;       /* 平衡填充 */
    
    /* 跨列 */
    h2 {
        column-span: all;       /* 跨所有列 */
    }
}

2. 文字效果

.text {
    /* 文字阴影 */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    text-shadow: 0 0 10px #ff0, 0 0 20px #f0f;
    
    /* 文字溢出 */
    text-overflow: ellipsis;    /* 显示省略号 */
    text-overflow: clip;        /* 直接裁剪 */
    
    /* 文字换行 */
    word-wrap: break-word;      /* 长单词换行 */
    word-break: break-all;      /* 任意位置断行 */
    overflow-wrap: anywhere;    /* 更智能的换行 */
    
    /* 文字渲染 */
    text-rendering: optimizeLegibility;  /* 优化可读性 */
}

3. 字体增强

/* Web字体 */
@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;  /* 字体加载策略 */
}

.text {
    font-variant: small-caps;  /* 小型大写字母 */
    font-kerning: normal;      /* 字距调整 */
    font-feature-settings: "kern", "liga", "clig";  /* 字体特性 */
}

4. 变量 (Custom Properties)

:root {
    /* 定义变量 */
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --spacing: 20px;
    --font-size: 16px;
}

.element {
    /* 使用变量 */
    color: var(--primary-color);
    margin: var(--spacing);
    font-size: var(--font-size, 14px);  /* 默认值 */
    
    /* 动态修改变量 */
    --primary-color: #e74c3c;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #1abc9c;
    }
}

5. 计算函数 (calc)

.element {
    /* 动态计算 */
    width: calc(100% - 40px);
    height: calc(100vh - 100px);
    font-size: calc(16px + 1vw);
    
    /* 复杂计算 */
    padding: calc(2em - 10px);
    margin: calc(50% - 100px);
}

十一、CSS3 实战示例

1. 卡片悬停效果

.card {
    width: 300px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* 3D变换 */
    transform: perspective(1000px) rotateY(0deg);
}

.card:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
                0 10px 10px rgba(0,0,0,0.22);
    transform: perspective(1000px) rotateY(10deg) scale(1.05);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #ff6b6b, #4ecdc4);
    border-radius: 10px 10px 0 0;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.card:hover::before {
    transform: scaleX(1);
}

2. 加载动画

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    border-top-color: #3498db;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 脉冲动画 */
.pulse {
    width: 20px;
    height: 20px;
    background: #e74c3c;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

3. 响应式网格系统

/* 使用CSS Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* 使用Flexbox */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.flex-grid .item {
    flex: 1 1 calc(33.333% - 20px);
    min-width: 250px;
}

@media (max-width: 768px) {
    .flex-grid .item {
        flex: 1 1 100%;
    }
}

4. 暗色模式支持

:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --primary-color: #3498db;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #ffffff;
        --primary-color: #1abc9c;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

十二、浏览器兼容性处理

1. 前缀使用

.gradient {
    /* 渐变背景 */
    background: -webkit-linear-gradient(red, blue);
    background: -moz-linear-gradient(red, blue);
    background: -o-linear-gradient(red, blue);
    background: linear-gradient(red, blue);
    
    /* 动画 */
    -webkit-animation: slide 1s;
    -moz-animation: slide 1s;
    animation: slide 1s;
}

/* 使用 PostCSS Autoprefixer 自动添加前缀 */

2. 特性检测

// 使用 Modernizr 检测
if (Modernizr.flexbox) {
    // 支持 flexbox
} else {
    // 降级方案
}

// 使用 CSS @supports
@supports (display: grid) {
    .container {
        display: grid;
    }
}

@supports not (display: grid) {
    .container {
        display: flex;
    }
}

总结

CSS3 的主要优势：

1. 更强大的选择器 - 精确控制元素
2. 视觉效果丰富 - 渐变、阴影、圆角等
3. 布局革命 - Flexbox 和 Grid
4. 动画交互 - Transition 和 Animation
5. 响应式设计 - 媒体查询
6. 性能优化 - 硬件加速、变量系统

学习建议：

1. 从最常用的特性开始：flexbox、grid、transition
2. 实践为主，多写示例代码
3. 关注浏览器兼容性，使用 Can I Use 网站
4. 学习使用 CSS 预处理器（Sass/Less）增强开发效率
5. 掌握现代 CSS 开发工具（PostCSS、CSS Modules 等）