高级CSS - 当发网

CSS函数

CSS提供了多种内置函数，可以在属性值中使用：

calc() 函数

用于动态计算长度值：

                        CSS
                    

                        .container {
    width: calc(100% - 40px);
    height: calc(50vh + 100px);
}
                    

min() 和 max() 函数

用于设置最小和最大值：

                        CSS
                    

                        .responsive-element {
    width: min(100%, 500px);
    font-size: max(16px, 2vw);
}
                    

clamp() 函数

设置一个值的范围：

                        CSS
                    

                        .fluid-text {
    font-size: clamp(16px, 4vw, 24px);
    /* 最小值16px，理想值4vw，最大值24px */
}
                    

其他CSS函数

CSS还提供了许多其他有用的函数：

函数	描述	示例
var()	使用CSS变量	color: var(--primary-color)
attr()	获取HTML属性值	content: attr(data-label)
rgb() / rgba()	定义颜色	color: rgb(255, 0, 0)
hsl() / hsla()	使用HSL定义颜色	color: hsl(120, 100%, 50%)
url()	引用资源	background: url(image.jpg)

CSS混合模式

混合模式控制元素内容如何与背景混合：

                        CSS
                    

                        .blend-element {
    background-image: url(texture.jpg);
    background-color: var(--primary-color);
    background-blend-mode: multiply;
}

.text-blend {
    mix-blend-mode: difference;
}
                    

混合模式	描述
normal	正常混合（默认）
multiply	正片叠底
screen	滤色
overlay	叠加
darken	变暗
lighten	变亮
color-dodge	颜色减淡
color-burn	颜色加深
difference	差值

混合模式示例

CSS滤镜

滤镜可以对元素应用图形效果：

                        CSS
                    
                        .filtered-element {
    filter: blur(5px) grayscale(50%) brightness(1.2);
}

滤镜函数	描述
blur()	模糊效果
brightness()	亮度调整
contrast()	对比度调整
grayscale()	灰度效果
hue-rotate()	色相旋转
invert()	颜色反转
opacity()	透明度调整
saturate()	饱和度调整
sepia()	棕褐色效果
drop-shadow()	阴影效果

滤镜效果示例

CSS遮罩和剪切

clip-path

用于创建复杂的形状：

                        CSS
                    

                        .clipped-element {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    /* 菱形 */
    
    clip-path: circle(50% at 50% 50%);
    /* 圆形 */
    
    clip-path: inset(10% 20% 30% 40%);
    /* 矩形内切 */
}
                    

mask

使用图像或渐变作为遮罩：

                        CSS
                    

                        .masked-element {
    mask-image: linear-gradient(to right, transparent, black);
    -webkit-mask-image: linear-gradient(to right, transparent, black);
}
                    

遮罩和剪切示例

CSS计数器

CSS计数器允许自动编号元素：

                        CSS
                    

                        ol {
    counter-reset: section;
}

li {
    counter-increment: section;
}

li::before {
    content: counter(section) ". ";
    font-weight: bold;
    color: var(--primary-color);
}
                    

第一个项目
第二个项目
第三个项目

嵌套计数器

CSS计数器支持嵌套使用：

                        CSS
                    

                        ol {
    counter-reset: chapter;
}

li {
    counter-increment: chapter;
}

li ol {
    counter-reset: section;
}

li li {
    counter-increment: section;
}

li li::before {
    content: counter(chapter) "." counter(section) " ";
}
                    

CSS自定义属性（变量）的高级用法

CSS变量可以与JavaScript结合，实现动态主题切换：

                        CSS
                    

                        :root {
    --primary-color: #82255E;
    --bg-color: #ffffff;
    --text-color: #333333;
}

.dark-theme {
    --primary-color: #B83B6A;
    --bg-color: #333333;
    --text-color: #ffffff;
}
                    

                        JavaScript
                    

                        // 切换主题
function toggleTheme() {
    const root = document.documentElement;
    root.classList.toggle('dark-theme');
}
                    

CSS变量的计算

CSS变量可以与calc()函数结合使用：

                        CSS
                    

                        :root {
    --base-size: 16px;
    --padding: calc(var(--base-size) * 2);
    --margin: calc(var(--base-size) / 2);
}
                    

CSS容器查询

容器查询允许根据父容器尺寸应用样式：

                        CSS
                    

                        .container {
    container-type: inline-size;
}

.card {
    display: grid;
    grid-template-columns: 1fr;
}

@container (min-width: 500px) {
    .card {
        grid-template-columns: 1fr 2fr;
    }
}
                    

注意： 容器查询是CSS的新特性，目前浏览器支持度有限，需要使用@supports进行特性检测。

CSS子网格

子网格允许嵌套网格继承父网格的轨道：

                        CSS
                    

                        .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.nested-grid {
    display: grid;
    grid-template-columns: subgrid;
}
                    

高级CSS效果演示

当前效果: 无

强度值: 50

效果类型

选择效果类型:

选择要应用的高级CSS效果类型

效果控制

强度/参数: 50

调整效果的强度或参数值

操作控制

效果演示区域

效果: 无

强度: 0

生成的CSS代码

                            CSS
                        
                            /* 选择效果并调整参数查看生成的CSS代码 */

效果说明

选择不同的效果类型来查看高级CSS特性的实际应用。

性能优化技巧

使用transform和opacity： 这些属性可以由GPU加速，性能更好。

避免布局抖动： 避免在动画中修改会影响布局的属性。

使用will-change： 提前告知浏览器元素将要发生的变化。

优化CSS选择器： 避免使用过于复杂的选择器。

                        CSS
                    

                        /* 性能优化示例 */
.animated-element {
    will-change: transform, opacity;
    transform: translateZ(0); /* 触发GPU加速 */
}
                    

CSS containment

使用contain属性限制浏览器重绘和重排的范围：

                        CSS
                    
                        .isolated-element {
    contain: layout paint style;
}

CSS Houdini

CSS Houdini是一组低级API，允许开发者扩展CSS的功能：

Properties and Values API

允许注册自定义CSS属性：

                        JavaScript
                    

                        // 注册自定义属性
CSS.registerProperty({
    name: '--my-color',
    syntax: '<color>',
    inherits: false,
    initialValue: '#000000'
});
                    

Paint API

允许使用JavaScript创建自定义CSS图像：

                        JavaScript
                    

                        // 注册绘制工作
registerPaint('my-pattern', class {
    paint(ctx, size, properties) {
        // 自定义绘制逻辑
    }
});
                    

                        CSS
                    
                        .custom-element {
    background-image: paint(my-pattern);
}

CSS的未来特性

CSS嵌套

允许在CSS中使用嵌套语法：

                        CSS
                    

                        .card {
    padding: 1rem;
    
    & .featured {
        border: 2px solid gold;
    }
    
    & .title {
        font-size: 1.5rem;
    }
}
                    

CSS层叠层

允许更好地控制CSS规则的优先级：

                        CSS
                    

                        /* 定义层 */
@layer base, components, utilities;

/* 在特定层中添加样式 */
@layer base {
    p {
        margin-bottom: 1rem;
    }
}
                    

上一课：伪元素下一课：CSS参考手册