当前位置：首页 > news >正文

【网页】CSS原子化+变量尝试

news 来源：原创 2025/4/29 19:47:16

概述

最近想做一个卡片形式的网页工具，可以生成好看的小红书笔记，不喜欢用前端别人写的东西，尝试了一下CSS原子化，确实能用比较少的代码完成很好的功能。

结合一些现成的工具，可以很简单的扩展样式。

目前积累的代码

.box{width: 200px;aspect-ratio: 1;}
/* 线性渐变文本 */
.gradient_text_red_blue{
    background: linear-gradient(to right,red,blue);
    background-clip: text;
    color: transparent;
}
/* 圆角 */
.r5{border-radius: 5px;}
.r10{border-radius: 10px;}
.r15{border-radius: 15px;}
/* 内边距 */
.pd10{padding: 10px;}
/* 比例 */
.aspect_4_3{aspect-ratio: 4/3;}
.aspect_16_9{aspect-ratio: 16/9;}
/* 渐变背景 */
.linear_bg_45_red_yellow{background: linear-gradient(45deg,red,yellow);}
/* 毛玻璃 */
.glass{
    background-color:rgba(255, 255, 255, 0.05);
    backdrop-filter:blur(5px);
}
/* 阴影 */
.shadow{ox-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);}
/* ------------------------------ 特殊背景 ------------------------------ */
/* 棋盘格 */
.bg_checker_board{
background-color: #eee;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}

使用：

<div class="box aspect_16_9 linear_bg_45_red_yellow r15 pd10">
    <p class="gradient_text_red_blue">这是一段普通的文本。</p>
    
</div>

效果：

可以看到，原子化的CSS具有很强的复用性，对于一些小页面，十几二十行的CSS就可以搞定很多东西。

加入变量控制

CSS变量，可以进一步简化CSS的样式控制。

/* 变量 */
:root{
    --color1:rgb(89, 116, 34);
    --color2:rgb(84, 68, 9);
    --deg:90deg;
}

/* 宽度 */
.w200{width:200px;}
.w400{width:400px;}
.w800{width:800px;}

/* 线性渐变文本 */
.gradient_text_red_blue{
    background: linear-gradient(var(--deg),var(--color1),var(--color2));
    background-clip: text;
    color: transparent;
}
/* 圆角 */
.r5{border-radius: 5px;}
.r10{border-radius: 10px;}
.r15{border-radius: 15px;}
/* 内边距 */
.pd10{padding: 10px;}
.pd20{padding: 20px;}
.pd40{padding: 40px;}
/* 比例 */
.aspect_4_3{aspect-ratio: 4/3;}
.aspect_16_9{aspect-ratio: 16/9;}
.aspect_3_4{aspect-ratio: 3/4;}
/* 渐变背景 */
.linear_bg_45_red_yellow{background: linear-gradient(var(--deg),var(--color1),var(--color2));}
/* 毛玻璃 */
.glass{
    background-color:rgba(255, 255, 255, 0.8);
    backdrop-filter:blur(25px);
}
/* 阴影 */
.shadow{box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}
/* ------------------------------ 特殊背景 ------------------------------ */
/* 棋盘格 */
.bg_checker_board{
background-color: #eee;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}

测试：

<div class="w400 aspect_3_4 bg_checker_board pd40">
    <div class="w400 pd10 aspect_3_4 shadow glass r15 pd10">
        <h1 class="gradient_text_red_blue">这里是标题</h1>
    </div>
</div>

效果：