前端老鸟血泪史：CSS画圆三角总翻车？边框骚操作让你秒变图形大师

Ne0inhk

15 Mar 2026 — 24 min read

前端老鸟血泪史：CSS画圆三角总翻车？边框骚操作让你秒变图形大师

前端老鸟血泪史：CSS画圆三角总翻车？边框骚操作让你秒变图形大师

前端老鸟血泪史：CSS画圆三角总翻车？边框骚操作让你秒变图形大师

开场先唠两句

谁还没被产品经理逼着用纯CSS画个"五彩斑斓的透明三角形"过？那种凌晨两点收到消息说"老板觉得那个箭头不够锐"的绝望，我懂，我都懂。

别急着骂娘，今天咱就把CSS边框那点破事儿扒光了聊，顺便教你们怎么用几行代码忽悠住甲方。咱们不整那些虚头巴脑的理论，直接上干货，主打一个"看了就能用，用了就能装X"。

说实话，我刚开始写前端那会儿，看到设计师给的切图稿里有个小三角，第一反应就是打开Photoshop切个5x3像素的png。结果第二天需求变了，箭头要从蓝色改成渐变色，我当场就想把显示器吃了。后来老大哥看不下去，扔给我一行border-left: 10px solid transparent，我盯着那行代码看了十分钟，感觉世界观都被重构了。

这玩意儿到底是个啥

很多人以为border就是个加粗的线，其实人家内心戏多着呢，是个隐藏的几何大师。

简单说，浏览器渲染边框的时候，四个方向的边框在角上其实是斜着拼起来的，这就给了咱们钻空子的机会。想象一下，你给一个div设置四个不同颜色的边框，中间是空的，你会看到什么？四个梯形围成一个小方块，中间是透明的。这个特性，就是所有CSS图形魔法的根基。

只要把宽高设为0，再操控border的粗细和颜色，你就能凭空变出三角形、梯形甚至平行四边形。这原理听起来简单，但第一次亲眼见到那个效果的时候，我真的对着屏幕"卧槽"出了声。

/* 先来个最基础的，看看border的真面目 */.geometry-reveal{width: 100px;height: 100px;border-top: 40px solid #FF6B6B;/* 珊瑚红，看着喜庆 */border-right: 40px solid #4ECDC4;/* 薄荷绿，护眼 */border-bottom: 40px solid #45B7D1;/* 天空蓝 */border-left: 40px solid #96CEB4;/* 牛油果绿 */background: transparent;}

你看，上面这个例子，四个边框颜色都不一样，中间是个100x100的透明区域。浏览器在渲染的时候，四个角其实是斜切拼接的。这个细节平时没人注意，但关键时刻能救命。

现在咱们玩个狠的，把宽高都干掉：

/* 见证奇迹的时刻 */.magic-zero{width: 0;height: 0;border-top: 50px solid #FF6B6B;border-right: 50px solid #4ECDC4;border-bottom: 50px solid #45B7D1;border-left: 50px solid #96CEB4;}

看到了吗？四个等腰直角三角形拼成了一个正方形，中间啥都没有。这时候如果你把其中三个边框的颜色改成transparent，剩下的那个就是一个完美的三角形。这就是所有CSS三角形的底层逻辑，简单粗暴但有效。

把方块捏成圆的骚操作

想要正圆？别在那算半径了，直接border-radius: 50%，只要容器是正方形，立马给你圆润起来。这大概是CSS里最让人舒适的一行代码了，没有之一。

/* 基础圆，有手就行 */.basic-circle{width: 100px;height: 100px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 50%;/* 就这一行，方圆变圆 */}/* 椭圆，横着胖 */.fat-ellipse{width: 200px;height: 100px;background: #f093fb;border-radius: 50%;/* 自动根据宽高比变成椭圆 */}/* 精准控制椭圆，想胖就胖想瘦就瘦 */.precise-ellipse{width: 300px;height: 150px;background:linear-gradient(to right, #4facfe 0%, #00f2fe 100%);border-radius: 150px / 75px;/* 水平半径/垂直半径，比捏泥人还方便 */}

还有个冷知识，border-radius不仅能搞圆角，还能搞出花瓣形、叶子形，只要数值给得够风骚，CSS也能画出抽象派大作。这玩意儿支持斜杠语法，你可以给每个角设置两个半径，一个是水平方向，一个是垂直方向。

/* 叶子形状，像不像一片叶子？ */.leaf-shape{width: 100px;height: 100px;background: #56ab2f;/* 左上右下圆，右上左下尖，像个叶子 */border-radius: 0 50px 0 50px;}/* 胶囊形状，做按钮常用 */.capsule{width: 200px;height: 60px;background: #ff6b6b;border-radius: 30px;/* 高度的一半，完美胶囊 */display: flex;align-items: center;justify-content: center;color: white;font-weight: bold;}/* 超级花瓣，四个角都不一样 */.super-flower{width: 150px;height: 150px;background:linear-gradient(45deg, #f093fb 0%, #f5576c 100%);/* 水平半径/垂直半径，每个角都能单独控制 */border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;animation: morph 8s ease-in-out infinite;/* 加点动画更骚 */}@keyframes morph{0%, 100%{border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;}50%{border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;}}

看到那个super-flower了吗？这就是传说中的" blob形状"，现在特别流行。用border-radius的斜杠语法，你可以创造出各种有机形状，看起来像是用设计软件画出来的，其实就一行CSS。那个动画更是让形状在呼吸，用来做背景装饰或者加载状态，逼格直接拉满。

三角形是怎么"骗"出来的

核心机密来了：把一个div的宽高都设为0，然后只留一边的border有颜色，其他三边透明。这时候你看到的不是边框，而是四个三角形拼接后的其中一个，剩下的都被你藏起来了。

/* 四大基础方向，一次看齐 */.triangle-up{width: 0;height: 0;border-left: 50px solid transparent;/* 左边透明 */border-right: 50px solid transparent;/* 右边透明 */border-bottom: 80px solid #e74c3c;/* 底边红色，尖朝上 *//* 上边没写，默认0，所以是个三角形 */}.triangle-down{width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 80px solid #3498db;/* 顶边蓝色，尖朝下 */}.triangle-left{width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-right: 80px solid #2ecc71;/* 右边绿色，尖朝左 */}.triangle-right{width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 80px solid #f39c12;/* 左边橙色，尖朝右 */}

想控制三角形的方向？很简单，谁有颜色谁就是底边，想让尖朝上，就让下边框有颜色，以此类推。脑子转不过弯的拿纸笔画一下就懂了。我第一次学的时候在纸上画了十分钟，画完突然顿悟，感觉智商都提升了。

进阶玩法：利用透明边框的宽度比例，可以调整三角形的胖瘦，甚至做出等腰、直角各种花样，比SVG还轻量。

/* 胖三角和瘦三角，控制透明边的宽度 */.fat-triangle{width: 0;height: 0;border-left: 80px solid transparent;/* 宽一点 */border-right: 80px solid transparent;border-bottom: 50px solid #9b59b6;/* 矮一点，变胖 */}.skinny-triangle{width: 0;height: 0;border-left: 20px solid transparent;/* 窄一点 */border-right: 20px solid transparent;border-bottom: 100px solid #1abc9c;/* 高一点，变瘦 */}/* 直角三角形，只留一个透明边 */.right-triangle{width: 0;height: 0;border-bottom: 100px solid #e67e22;/* 底边 */border-left: 100px solid transparent;/* 左边透明 *//* 右边和上边都是0，所以是直角三角形 */}/* 更锐利的角，不等边三角形 */.sharp-triangle{width: 0;height: 0;border-left: 30px solid transparent;/* 左边窄 */border-right: 70px solid transparent;/* 右边宽 */border-bottom: 100px solid #34495e;/* 底边 *//* 尖不在正中间，偏左，适合做一些指示箭头 */}

看到那个sharp-triangle了吗？通过控制左右透明边框的宽度不等，你可以让三角形的尖偏移中心位置。这在实际项目中超级有用，比如你要做一个指向某个按钮的提示箭头，但那个按钮不在正中间，你就可以微调这个偏移量，让箭头精准指向目标。

还有更骚的操作，用border-radius配合透明边框，可以做出圆角三角形：

/* 圆角三角形，看起来柔和很多 */.rounded-triangle{width: 0;height: 0;border-left: 60px solid transparent;border-right: 60px solid transparent;border-bottom: 100px solid #ff6b6b;border-radius: 50%;/* 加上圆角，瞬间柔和 *//* 这个原理是圆角会作用于边框的交接处，产生曲线效果 */}

这招在移动端特别实用，因为尖锐的三角形在手机上看起来有点扎眼，稍微圆角一下，整体感觉就舒服多了。

这招好使但也有坑

优点那是一堆：不用加载图片，HTTP请求省了，放大缩小不失真，改颜色也就改个代码的事儿，维护起来爽歪歪。你想想，一个项目里如果有二十个小图标都用png，每次改颜色都要重新切图，那简直是前端地狱。

缺点也得认：兼容性虽然现在没啥大问题，但在一些古董浏览器上可能会渲染成直角。我上次遇到一个客户还在用IE9，我的三角形在那上面显示成一个方块带三条线，当场社死。

而且太复杂的图形代码可读性极差，接手的人容易想打人。我见过一个项目里有个"六边形头像框"，用了三层div嵌套，六个伪元素，代码注释写着"千万别动，动了就崩"，这种代码就是技术债，迟早要还。

最要命的是，这玩意儿没法直接加阴影或者渐变（除非用伪元素套娃）。你说你想做个带阴影的三角形气泡？抱歉，border画出来的三角形本质上是个边框技巧，不是真正的形状，所以box-shadow会作用在整个"盒子"上，而不是你看到的那个三角形上。

/* 错误示范：阴影会作用在看不见的盒子上 */.wrong-shadow{width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 80px solid #3498db;box-shadow: 0 10px 20px rgba(0,0,0,0.3);/* 这会在看不见的0x0盒子上加阴影，完全不是你要的效果 */}/* 正确做法：用filter或者伪元素 */.correct-shadow{position: relative;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 80px solid #3498db;filter:drop-shadow(0 10px 10px rgba(0,0,0,0.3));/* filter的drop-shadow会跟随形状，这才是正解 */}

看到区别了吗？box-shadow是矩形的，而filter: drop-shadow()会跟随你实际看到的形状。这个坑我踩过无数次，直到有一次在Stack Overflow上看到大神解答，才恍然大悟。

一旦需求稍微复杂点，就得层层嵌套，DOM树直接爆炸。比如你要做一个带边框的三角形，里面还要有内容，这时候就得用两个三角形叠罗汉，外面那个大一点当边框，里面那个小一点当背景。如果还要圆角、阴影、渐变，那代码量直接翻倍。

实际干活时咋用才不挨骂

做下拉菜单那个小箭头？别去切图了，直接用border画，hover变色还丝滑。

/* 下拉菜单组件，箭头用border画 */.dropdown{position: relative;display: inline-block;}.dropdown-toggle{padding: 10px 40px 10px 20px;background: #fff;border: 1px solid #ddd;cursor: pointer;position: relative;}/* 那个向下的小箭头 */.dropdown-toggle::after{content:'';position: absolute;right: 15px;top: 50%;transform:translateY(-50%);width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #666;/* 尖朝下 */transition: transform 0.3s, border-color 0.3s;/* 加点过渡动画 */}/* 展开时箭头旋转 */.dropdown.active .dropdown-toggle::after{transform:translateY(-50%)rotate(180deg);/* 转180度，尖朝上 */border-top-color: #333;/* 颜色加深 */}/* 下拉内容 */.dropdown-menu{position: absolute;top: 100%;left: 0;background: white;border: 1px solid #ddd;box-shadow: 0 2px 8px rgba(0,0,0,0.1);display: none;min-width: 200px;}.dropdown.active .dropdown-menu{display: block;}

看到那个::after伪元素了吗？就三行border代码，一个完美的下拉箭头就出来了。而且因为是CSS控制的，hover的时候可以随意改颜色，展开的时候还能旋转动画，比切图灵活一万倍。

聊天气泡的尖尖角，也是border的天下，左边右边随便指，还能自适应内容高度。

/* 聊天气泡，带小尾巴 */.chat-bubble{position: relative;background: #dcf8c6;/* 微信那种绿色 */padding: 12px 16px;border-radius: 8px;max-width: 300px;margin-left: 20px;/* 给尾巴留空间 */}/* 左边的小尾巴 */.chat-bubble::before{content:'';position: absolute;left: -10px;/* 伸出去 */top: 15px;/* 垂直位置 */width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-right: 10px solid #dcf8c6;/* 尖朝左，颜色跟背景一样 */}/* 右边的版本（对方发的消息） */.chat-bubble-right{position: relative;background: #fff;padding: 12px 16px;border-radius: 8px;max-width: 300px;margin-right: 20px;border: 1px solid #e0e0e0;}.chat-bubble-right::after{content:'';position: absolute;right: -10px;top: 15px;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 10px solid #fff;/* 尖朝右 */}/* 如果右边气泡有边框，尾巴也要做边框效果，得用两层 */.chat-bubble-right-with-border::before{content:'';position: absolute;right: -11px;/* 多1px，因为父元素有1px边框 */top: 15px;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 10px solid #e0e0e0;/* 这层是边框颜色，大一点 */z-index: -1;}.chat-bubble-right-with-border::after{content:'';position: absolute;right: -10px;top: 15px;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 10px solid #fff;/* 这层是背景色，小一点，盖住边框层的内侧 */}

注意右边带边框的版本，用了::before和::after两个伪元素叠在一起。::before是边框色，稍微大一点伸出去；::after是背景色，正好盖住::before的内侧，这样就形成了带边框的尾巴。这是经典的"叠罗汉"技巧，虽然土但管用。

加载动画里那些转圈的小三角，用这个写性能吊打GIF，手机电量都能多撑半小时。

/* 旋转加载器，用border实现 */.spinner{width: 50px;height: 50px;border: 4px solid #f3f3f3;/* 灰色背景环 */border-top: 4px solid #3498db;/* 蓝色只有上边 */border-radius: 50%;/* 变成圆环 */animation: spin 1s linear infinite;/* 转起来 */}@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}/* 更复杂的脉冲三角形加载器 */.pulse-triangles{position: relative;width: 60px;height: 60px;}.pulse-triangles::before, .pulse-triangles::after{content:'';position: absolute;width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 35px solid #e74c3c;animation: pulse 1.5s ease-in-out infinite;}.pulse-triangles::after{animation-delay: 0.75s;/* 错开时间，形成波浪效果 */opacity: 0.5;}@keyframes pulse{0%, 100%{transform:scale(1)translateY(0);opacity: 1;}50%{transform:scale(0.5)translateY(-20px);opacity: 0.3;}}

甚至有的大佬用这招做全屏背景装饰，几十个三角形拼个低多边形风格，看着特高大上，其实代码就几十行。

/* 低多边形背景，用CSS三角形拼出来的 */.low-poly-bg{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;overflow: hidden;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);}/* 用多个绝对定位的三角形拼成背景 */.low-poly-bg::before{content:'';position: absolute;width: 0;height: 0;/* 巨大的三角形 */border-left: 50vw solid transparent;border-right: 50vw solid transparent;border-bottom: 100vh solid rgba(255,255,255,0.1);top: 0;left: 0;}.low-poly-bg::after{content:'';position: absolute;width: 0;height: 0;border-left: 30vw solid transparent;border-right: 70vw solid transparent;border-top: 80vh solid rgba(255,255,255,0.05);bottom: 0;right: 0;}/* 还可以加更多层，用多个div或者伪元素 */.poly-layer-1{position: absolute;width: 0;height: 0;border-left: 40vw solid rgba(255,255,255,0.08);border-top: 40vw solid transparent;border-bottom: 40vw solid transparent;top: 20%;left: 0;}

这种背景看起来像是用WebGL或者复杂SVG做的，其实纯CSS就能搞定，性能还更好，因为浏览器对border的渲染是硬件加速的。

遇到鬼打墙怎么破

问题一：三角形边缘有锯齿？那是抗锯齿没开好，试试给父容器加个transform: rotate(0deg)或者微调一下颜色透明度，有时候玄学能救命。

/* 抗锯齿玄学方案 */.anti-aliased-triangle{width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 80px solid #3498db;transform:rotate(0deg);/* 就这一行，莫名其妙能 smoothing 边缘 *//* 或者试试 *//* transform: translateZ(0); *//* 开启硬件加速 */}/* 另一个方案：用rgba带透明度的颜色 */.smooth-triangle{width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 80px solid rgba(52, 152, 219, 0.99);/* 0.99透明度，不是1，玄学 */}

问题二：想要带边框的三角形怎么办？这是个经典难题，通常得用两个三角形叠罗汉，里面那个小一圈当内容，外面那个大一点当边框，虽然土但管用。

/* 带边框的三角形，叠罗汉方案 */.bordered-triangle-wrapper{position: relative;width: 100px;height: 100px;}/* 外层大三角形，当边框 */.bordered-triangle-outer{position: absolute;width: 0;height: 0;border-left: 52px solid transparent;/* 比内层大2px */border-right: 52px solid transparent;border-bottom: 82px solid #2c3e50;/* 边框颜色，深色 */top: 0;left: 0;z-index: 1;}/* 内层小三角形，当背景 */.bordered-triangle-inner{position: absolute;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 80px solid #3498db;/* 填充颜色 */top: 1px;/* 居中偏移 */left: 2px;z-index: 2;}

问题三：代码写乱了看不懂？赶紧上注释！或者干脆封装成Mixin（如果你用Sass/Less），别让后来的同事顺着网线过来砍你。

// Sass Mixin，一劳永逸 @mixin triangle($direction, $size, $color) { width: 0; height: 0; @if $direction == 'up' { border-left: $size solid transparent; border-right: $size solid transparent; border-bottom: $size * 1.6 solid $color; // 1.6是黄金比例，看起来舒服 } @else if $direction == 'down' { border-left: $size solid transparent; border-right: $size solid transparent; border-top: $size * 1.6 solid $color; } @else if $direction == 'left' { border-top: $size solid transparent; border-bottom: $size solid transparent; border-right: $size * 1.6 solid $color; } @else if $direction == 'right' { border-top: $size solid transparent; border-bottom: $size solid transparent; border-left: $size * 1.6 solid $color; } } // 使用示例 .tooltip-arrow { @include triangle('up', 10px, #333); // 10px大小的向上黑色箭头 } .dropdown-arrow { @include triangle('down', 8px, #666); // 8px向下的灰色箭头 }

问题四：在Flex布局里失灵了？多半是因为宽高没设对，或者被子元素撑开了，记得死死按住width: 0和height: 0这两条底线。

/* Flex布局里的三角形，一定要显式设置宽高为0 */.flex-container{display: flex;align-items: center;gap: 10px;}.flex-triangle{width: 0 !important;/* 加important，防止被flex拉伸 */height: 0 !important;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 30px solid #e74c3c;flex-shrink: 0;/* 防止被压缩 */}

几个让同事喊666的野路子

别光盯着border-solid，试试border-style的其他值，虽然少见但偶尔能出奇效。

/* 虚线三角形，有点像素风 */.dashed-triangle{width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 80px dashed #e74c3c;/* dashed样式 */}/* 双线三角形，看起来有边框效果 */.double-triangle{width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 80px double #3498db;/* 双线，有层次感 */}

配合clip-path一起用，border负责简单图形，clip-path负责复杂裁剪，强强联手，天下无敌。

/* border + clip-path 组合拳 */.hybrid-shape{width: 100px;height: 100px;background:linear-gradient(45deg, #f093fb 0%, #f5576c 100%);border-radius: 20px;clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);/* 菱形裁剪 *//* 先用border-radius做出圆角矩形，再用clip-path切成菱形 *//* 这样四个角是圆的，但整体是菱形，单用border或者单用clip-path都做不出来 */}

用伪元素::before和::after来画图形，主容器留出来放文字，这样结构清晰，以后改需求不用拆房子重建。

/* 图标按钮，图标用伪元素画，文字正常放 */.icon-btn{position: relative;padding: 12px 24px 12px 48px;/* 左边留空间给图标 */background: #3498db;color: white;border: none;border-radius: 6px;cursor: pointer;font-size: 16px;}/* 用::before画个播放图标（向右三角形） */.icon-btn.play::before{content:'';position: absolute;left: 20px;top: 50%;transform:translateY(-50%);width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 12px solid white;}/* 用::before画个下载图标（向下箭头） */.icon-btn.download::before{content:'';position: absolute;left: 20px;top: 50%;transform:translateY(-60%);/* 稍微偏上，下面还要加横线 */width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 10px solid white;}/* 下载图标的横线，用::after */.icon-btn.download::after{content:'';position: absolute;left: 18px;top: 50%;transform:translateY(40%);width: 12px;height: 2px;background: white;}

记住，能用CSS解决的绝不切图，这是前端人的尊严，哪怕代码写得像天书，那也是优雅的天书。

最后扯句闲篇

下次产品再让你画个"会呼吸的三角形"，你就把这篇甩给他，告诉他这叫"基于边框渲染机制的矢量图形解决方案"，听不懂就让他自己去学CSS规范。

实在不行，咱还有SVG这根救命稻草，但能不动用核武器就别动，毕竟CSS画图画得好，下班走得早。SVG是强，但写起来啰嗦，改起来麻烦，而且多了个文件请求或者一长串base64代码。CSS方案轻量、易改、好维护，除了代码可读性差点，几乎没毛病。

行了，今天的槽就吐到这，赶紧去试试把你们项目里那些丑爆的png图标换成CSS吧，换完记得回来点赞，不然我顺着网线过去帮你改bug！

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

专栏系列（点击解锁）	学习路线(点击解锁）	知识定位
《微信小程序相关博客》	持续更新中~	结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》	持续更新中~	AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》	《前端基础入门三大核心之html相关博客》	前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
	《前端基础入门三大核心之JS相关博客》	前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
	《前端基础入门三大核心之CSS相关博客》	介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
	《canvas绘图相关博客》	Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》	持续更新中~	详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》	持续更新中~	Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》	持续更新中~	SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》	持续更新中~	算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》	持续更新中~	作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
	《信息化人员基础技能知识相关博客》	无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
	《信息化技能面试宝典相关博客》	涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》	持续更新中~	罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》	持续更新中~	基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》	持续更新中~	分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具