CSS3 详解 速览

CSS3 详解速览

1. CSS3 概述

CSS3 是 CSS（层叠样式表）的最新版本，引入了许多新特性和模块，让网页设计更加丰富和灵活。

主要特点：

• 模块化设计：将功能分解为独立的模块
• 向后兼容：支持旧版本浏览器
• 渐进增强：新功能在支持的浏览器中生效

2. 新增选择器

2.1 属性选择器

/* 选择具有指定属性的元素 */
input[type="text"] { color: blue; }

/* 属性值以指定内容开头 */
a[href^="https"] { color: green; }

/* 属性值以指定内容结尾 */
a[href$=".pdf"] { color: red; }

/* 属性值包含指定内容 */
a[href*="example"] { color: orange; }

2.2 伪类选择器

/* 结构伪类 */
li:first-child { font-weight: bold; }
li:last-child { color: gray; }
li:nth-child(2n) { background: #f0f0f0; } /* 偶数行 */
li:nth-child(3n+1) { background: #e0e0e0; }

/* 目标伪类 */
:target { background: yellow; }

/* 否定伪类 */
p:not(.special) { margin: 10px; }

/* 空元素伪类 */
p:empty { display: none; }

2.3 伪元素选择器

/* 选择第一个字母 */
p::first-letter { font-size: 2em; font-weight: bold; }

/* 选择第一行 */
p::first-line { font-weight: bold; }

/* 选择选中的文本 */
::selection { background: blue; color: white; }

/* 在元素前插入内容 */
.quote::before { content: """; }

/* 在元素后插入内容 */
.quote::after { content: """; }

3. 文字和字体效果

3.1 文本阴影

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    /* text-shadow: x偏移 y偏移 模糊半径 颜色 */
}

/* 多重阴影 */
.multi-shadow {
    text-shadow: 
        1px 1px 2px black,
        0 0 1em blue,
        0 0 0.2em blue;
}

3.2 文本溢出处理

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多行文本溢出 */
.multiline-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

3.3 自定义字体

@font-face {
    font-family: 'MyCustomFont';
    src: url('font.woff2') format('woff2'),
         url('font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.custom-font {
    font-family: 'MyCustomFont', Arial, sans-serif;
}

4. 盒模型和布局

4.1 弹性盒子 (Flexbox)

.flex-container {
    display: flex;
    flex-direction: row; /* row | row-reverse | column | column-reverse */
    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
    justify-content: space-between; /* 主轴对齐 */
    align-items: center; /* 交叉轴对齐 */
    align-content: space-around; /* 多行对齐 */
}

.flex-item {
    flex-grow: 1; /* 放大比例 */
    flex-shrink: 1; /* 缩小比例 */
    flex-basis: auto; /* 基础大小 */
    /* 简写：flex: grow shrink basis */
    flex: 1 1 auto;
}

4.2 网格布局 (Grid)

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
    grid-template-rows: auto 1fr auto; /* 行高 */
    grid-gap: 10px; /* 网格间距 */
    /* 简写：grid-template: rows / columns */
    grid-template: auto 1fr auto / repeat(3, 1fr);
}

.grid-item {
    grid-column: 1 / 3; /* 占据第1到第3列 */
    grid-row: 1; /* 在第1行 */
    /* 简写：grid-area: row-start / col-start / row-end / col-end */
    grid-area: 1 / 1 / 2 / 4;
}

4.3 盒模型增强

.box-sizing {
    box-sizing: border-box; /* 包含边框和内边距 */
    /* content-box | border-box | inherit */
}

.resize {
    resize: both; /* 可调整大小 */
    /* none | both | horizontal | vertical */
    overflow: auto;
}

5. 背景和边框

5.1 多背景

.multi-bg {
    background-image: 
        url('top.png'),
        url('middle.png'),
        url('bottom.png');
    background-position: 
        top left,
        center,
        bottom right;
    background-repeat: no-repeat;
}

5.2 渐变背景

/* 线性渐变 */
.linear-gradient {
    background: linear-gradient(
        to right,           /* 方向 */
        #ff0000,           /* 起始颜色 */
        #00ff00 50%,       /* 中间颜色 */
        #0000ff            /* 结束颜色 */
    );
}

/* 径向渐变 */
.radial-gradient {
    background: radial-gradient(
        circle at center,   /* 形状和位置 */
        #ff0000,           /* 起始颜色 */
        #0000ff 70%        /* 结束颜色 */
    );
}

/* 重复渐变 */
.repeating-gradient {
    background: repeating-linear-gradient(
        45deg,
        #ff0000,
        #ff0000 10px,
        #00ff00 10px,
        #00ff00 20px
    );
}

5.3 圆角边框

.border-radius {
    border-radius: 10px;
    /* 分别设置四个角 */
    border-top-left-radius: 10px 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 5px;
}

5.4 边框图像

.border-image {
    border: 10px solid;
    border-image: url('border.png') 30 round;
    /* border-image: source slice width outset repeat */
}

5.5 阴影效果

.box-shadow {
    box-shadow: 
        2px 2px 5px rgba(0,0,0,0.3),  /* 外阴影 */
        inset 0 0 10px rgba(255,0,0,0.5); /* 内阴影 */
    /* box-shadow: x偏移 y偏移 模糊半径 扩展半径 颜色 inset */
}

6. 2D 和 3D 变换

6.1 2D 变换

.transform-2d {
    transform: 
        translate(50px, 30px)    /* 平移 */
        rotate(45deg)            /* 旋转 */
        scale(1.5, 1.2)          /* 缩放 */
        skew(30deg, 15deg);      /* 倾斜 */
}

/* 单独使用 */
.translate { transform: translateX(100px); }
.rotate { transform: rotate(90deg); }
.scale { transform: scale(2); }
.skew { transform: skewX(30deg); }

6.2 3D 变换

.transform-3d {
    transform-style: preserve-3d; /* 保持3D空间 */
    perspective: 1000px; /* 透视距离 */
    transform: 
        translate3d(10px, 20px, 30px)
        rotateX(45deg)
        rotateY(30deg)
        rotateZ(15deg)
        scale3d(1.2, 1.2, 1.2);
}

.perspective-container {
    perspective: 800px;
}

.perspective-item {
    transform: rotateY(45deg);
}

7. 过渡效果 (Transition)

.transition-example {
    width: 100px;
    height: 100px;
    background: red;
    transition: 
        width 2s ease-in-out,
        height 1s linear 0.5s,
        background 0.5s step-end;
    /* transition: property duration timing-function delay */
}

.transition-example:hover {
    width: 200px;
    height: 200px;
    background: blue;
}

/* 常用缓动函数 */
.ease { transition-timing-function: ease; }
.linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }

8. 动画效果 (Animation)

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        transform: translateX(10%);
        opacity: 0.8;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.animated-element {
    animation: 
        slideIn 2s ease-in-out 0.5s infinite alternate;
    /* animation: name duration timing-function delay iteration-count direction fill-mode play-state */
}

/* 动画属性详解 */
.animation-properties {
    animation-name: slideIn;                    /* 动画名称 */
    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;              /* 播放状态 */
}

9. 多列布局

.multi-column {
    column-count: 3;                /* 列数 */
    column-width: 200px;            /* 列宽 */
    column-gap: 20px;               /* 列间距 */
    column-rule: 1px solid #ccc;    /* 列边框 */
    column-fill: balance;           /* 列填充方式 */
}

.column-span {
    column-span: all;               /* 跨越所有列 */
}

10. 媒体查询

/* 基本媒体查询 */
@media screen and (max-width: 768px) {
    .container {
        width: 100%;
        padding: 10px;
    }
}

/* 复杂媒体查询 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .sidebar {
        width: 25%;
    }
}

/* 设备方向 */
@media screen and (orientation: landscape) {
    .hero {
        height: 50vh;
    }
}

/* 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        background-image: url('logo@2x.png');
    }
}

/* 打印样式 */
@media print {
    .no-print {
        display: none;
    }
    .page-break {
        page-break-before: always;
    }
}

11. 滤镜效果

.filter-effects {
    filter: 
        blur(5px)                    /* 模糊 */
        brightness(1.2)              /* 亮度 */
        contrast(1.5)                /* 对比度 */
        grayscale(50%)               /* 灰度 */
        hue-rotate(90deg)            /* 色相旋转 */
        invert(100%)                 /* 反色 */
        opacity(0.8)                 /* 透明度 */
        saturate(2)                  /* 饱和度 */
        sepia(50%)                   /* 褐色 */
        drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); /* 投影 */
}

12. 颜色和透明度

.color-formats {
    /* RGBA 颜色 */
    color: rgba(255, 0, 0, 0.5);
    
    /* HSLA 颜色 */
    background: hsla(120, 100%, 50%, 0.8);
    
    /* 透明度 */
    opacity: 0.7;
}

/* 渐变透明 */
.gradient-transparent {
    background: linear-gradient(
        to right,
        rgba(255,0,0,1),
        rgba(255,0,0,0)
    );
}

13. 用户界面增强

.ui-enhancements {
    /* 外观 */
    appearance: none;
    
    /* 用户选择 */
    user-select: none;
    
    /* 拖拽 */
    -webkit-user-drag: element;
    
    /* 滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
    
    /* 触摸动作 */
    touch-action: pan-x pan-y pinch-zoom;
}

/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
    width: 12px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

14. 实用示例

14.1 响应式卡片布局

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

14.2 导航菜单

.nav-menu {
    display: flex;
    list-style: none;
    background: #333;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    transition: background 0.3s ease;
}

.nav-link:hover {
    background: #555;
}

/* 下拉菜单 */
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

15. 浏览器兼容性

前缀处理

.transform-prefixed {
    -webkit-transform: rotate(45deg); /* Safari, Chrome */
    -moz-transform: rotate(45deg);    /* Firefox */
    -ms-transform: rotate(45deg);     /* IE */
    -o-transform: rotate(45deg);      /* Opera */
    transform: rotate(45deg);         /* 标准语法 */
}

/* 使用 autoprefixer 自动添加前缀 */

渐进增强策略

.button {
    /* 基础样式 */
    padding: 10px 20px;
    background: #007cba;
    color: white;
    border: none;
    
    /* 增强样式 */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.button:hover {
    background: #005a87;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

CSS3 提供了强大的样式控制能力，通过合理使用这些新特性，可以创建更加丰富和交互性强的网页效果。在实际开发中，建议根据项目需求和浏览器支持情况选择合适的特性。