知识篇 -- CSS3新增特性

Ray Shine 2023/11/11 CSSCSS3新特性

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

CSS3 是 CSS 规范的最新版本，它引入了许多强大的新特性，使得网页设计更加灵活和富有表现力。

# 1. 圆角 (Border-radius)

允许您为元素的边框创建圆角效果，而无需使用图像。

.box {
    border-radius: 10px; /* 所有角都为 10px 的圆角 */
    border-radius: 10px 20px 30px 40px; /* 左上、右上、右下、左下 */
}

# 2. 阴影 (Box-shadow 和 Text-shadow)

box-shadow: 为元素添加阴影效果。

.card {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

text-shadow: 为文本添加阴影效果。

h1 {
    text-shadow: 2px 2px 4px #333;
}

# 3. 渐变 (Gradients)

允许您在两种或多种颜色之间创建平滑的过渡效果。

线性渐变 (Linear Gradients):

.linear-gradient {
    background-image: linear-gradient(to right, red, yellow);
}

径向渐变 (Radial Gradients):

.radial-gradient {
    background-image: radial-gradient(circle, red, yellow, green);
}

# 4. 过渡 (Transitions)

允许您在不使用 Flash 动画或 JavaScript 的情况下，平滑地改变 CSS 属性值。

.box {
    transition: width 2s ease-in-out;
}

.box:hover {
    width: 200px;
}

# 5. 动画 (Animations)

通过 @keyframes 规则定义动画序列，实现更复杂的动画效果。

@keyframes slidein {
    from { transform: translateX(0%); }
    to { transform: translateX(100%); }
}

.element {
    animation: slidein 3s ease-in-out infinite alternate;
}

# 6. 变换 (Transforms)

允许您对元素进行 2D 或 3D 转换，例如移动、旋转、缩放和倾斜。

.box {
    transform: rotate(45deg) scale(1.2);
}

# 7. 多列布局 (Multi-column Layout)

允许您将内容分成多列，类似于报纸或杂志的布局。

.container {
    column-count: 3; /* 分成 3 列 */
    column-gap: 20px; /* 列间距 */
    column-rule: 1px solid #ccc; /* 列之间的分隔线 */
}

# 8. 弹性盒模型 (Flexbox)

一种一维布局模型，用于在容器中对项目进行对齐、分布和排序。

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

# 9. 网格布局 (CSS Grid)

一种二维布局模型，用于将页面划分为行和列，非常适合构建整个页面的布局。

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 三等分列 */
    grid-template-rows: auto auto; /* 行高自适应 */
    gap: 10px; /* 网格间距 */
}

# 10. 自定义属性 (CSS Variables)

允许您定义可在整个文档中重复使用的值。

:root {
    --primary-color: #007bff;
}

.button {
    background-color: var(--primary-color);
}

# 11. 媒体查询 (Media Queries)

响应式设计的核心，允许根据设备的特性应用不同的 CSS 样式。

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

# 12. 背景属性增强

background-size: 控制背景图片的大小。
background-origin: 控制背景图片的起始位置。
background-clip: 控制背景图片的绘制区域。

.element {
    background-size: cover;
    background-origin: content-box;
    background-clip: padding-box;
}

# 13. 文本效果

word-wrap / overflow-wrap: 控制长单词或 URL 的换行。
text-overflow: 控制文本溢出时的显示方式（例如 ellipsis）。

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

← 高级概念

一ξひβθ光 i