前端萌新别慌：30分钟搞懂CSS border所有属性（附超全示例代码）

前端萌新别慌30分钟搞懂CSS border所有属性附超全示例代码前端萌新别慌30分钟搞懂CSS border所有属性附超全示例代码先给border做个“人口普查”最原始的三件套width-style-color方向四兄弟top right bottom leftborder-style 的十连抽border-width 的“三挡自动”border-color 也能玩透明与渐变border-radius圆角、椭圆、胶囊、不规则盒模型爆炸现场border撑大布局表格里的border-collapse合并 or 分离骚操作1border画三角形骚操作2border旋转loading1px边框在移动端变粗——“物理像素”背锅border-image把边框换成图但IE劝退调试神器临时荧光borderSCSS变量统一边框设计token设计师给的“微妙灰”到底取哪个flex/grid里border会抽风吗兼容性老坑合集面试官不用图标纯CSS画对话框彩蛋borderclip-path做“动态缺口”收尾吐槽前端萌新别慌30分钟搞懂CSS border所有属性附超全示例代码——“哥我一行border:1px solid #000写到吐可面试官还是嫌我土怎么办”——“别急今天咱们把border扒到只剩底裤顺带用代码给它化个妆30分钟后你就拿着新简历去反杀。”先给border做个“人口普查”别看这哥们名字短户口本可长了。官方登记的有border-width 边框多粗border-style 边框长啥样border-color 边框啥颜色border-radius 圆角还是方角border-image 把边框换成图兼容屎山预警再加上方向四兄弟top、right、bottom、left每个都能单独领一份属性。算一下理论上限 5×420 个属性再乘上简写、复合、继承、初始值……——“停停停哥我CPU烧了”放心下面咱们用人类语言过一遍烧不了一点。最原始的三件套width-style-color先整一个“工地围挡”热热身divclassbox我是一条没有感情的边框/divstyle.box{width:200px;height:80px;border-width:8px;/* 多粗 */border-style:solid;/* 实线 */border-color:#ff4d4f;/* 猛男粉 */}/style写完一看嚯红得发紫老板以为报错。其实三兄弟能一次性合体border:8px solid #ff4d4f;合体技省键盘但别急着爽下面有坑。方向四兄弟top right bottom left有时候只想给下边加条“刘海”其它三边别凑热闹。最耿直写法border-top:3px dashed #09f;border-right:none;/* 直接让它消失 */border-bottom:6px double #333;border-left:12px dotted hotpink;也可以把四兄弟拉到一个群里用空格一次全体border-width:1px 2px 3px 4px;/* 上 右 下 左 */border-style:solid dashed dotted double;border-color:red green blue yellow;记忆口诀从12点钟方向顺时针转一圈和margin、padding一个尿性。——“哥我逆时针写的能跑吗”能跑浏览器只会当你写错了然后悄悄帮你“纠正”跑是跑就是心里膈应。border-style 的十连抽官方给出的合法值一共10个来张嘴接好solid | dashed | dotted | double | groove | ridge | inset | outset | hidden | nonenone和hidden最容易搞混none——直接拆边框占位0布局当它不存在。hidden——占着茅坑不拉屎布局占位还在就是看不见。下面这段代码挨个给你看脸divclassrowspanclasss solidsolid/spanspanclasss dasheddashed/spanspanclasss dotteddotted/spanspanclasss doubledouble/spanspanclasss groovegroove/span/divstyle.row{display:flex;gap:10px}.s{padding:6px 12px;border-width:4px;border-color:#333;}.s.solid{border-style:solid}.s.dashed{border-style:dashed}……/* 其余同理 *//style放大看dotted圆点居然不是正圆——“浏览器祖传像素对齐bug别纠结纠结就是10年寿命。”border-width 的“三挡自动”除了写固定pxCSS还给你三个模糊词thin、medium、thick。具体对应多少px——“看浏览器心情”。实测Chromethin≈1pxmedium≈3pxthick≈5px。做像素级还原时千万别用设计稿会拿刀追你九条街。/* 感受一下“自动挡” */.auto-border{border:thick ridge #ffcc00;}border-color 也能玩透明与渐变透明so easyborder-color:rgba(255,0,0,.3);/* 50%透明红 */border-color:transparent;/* 全隐形但占位 */渐变标准里其实没说border-color支持linear-gradient但你可以曲线救国——border-image后面讲。先给颗糖用currentColor让边框自动跟字体色走少写一行是一行。button{color:#1890ff;border:1px solid currentColor;/* 改文字色即可联动 */}border-radius圆角、椭圆、胶囊、不规则最基础border-radius:8px;/* 四角统一 */想玩花先上50%整胶囊.pill{height:40px;padding:0 20px;border-radius:20px;/* 高度一半 */}再来椭圆当宽高不一样50%就是椭圆本椭。.ellipse{width:120px;height:60px;border-radius:50%;}四值拆分border-radius:10px 20px 30px 40px / 5px 10px 15px 20px;/* “/”前是水平半径后是垂直半径别被吓到就是椭圆方程 */斜角切clip-path:polygon(0 0,100% 0,100%calc(100% - 20px),calc(100% - 20px)100%,0 100%);/* 配合border纯CSS就能做“优惠券”撕角 */盒模型爆炸现场border撑大布局默认box-sizing: content-box你给200×200的盒子加border:10px实际尺寸220×220。一行代码治百病*{box-sizing:border-box;}从此以后写死width:100%再随便加border妈妈再也不担心我被设计师打。表格里的border-collapse合并 or 分离tableclassatrtd1/tdtd2/td/trtrtd3/tdtd4/td/tr/tablestyle.a{border-collapse:collapse}/* 合并模式 */.a td{border:1px solid #333}/stylecollapse模式下相邻边框会合并粗细取最大那条separate模式则各走各的还能加border-spacing控制缝隙。——“哥我就想要0.5px的缝”醒醒border-spacing最小1px0.5px得用transform:scale(.5)伪类别把自己卷死。骚操作1border画三角形原理把width、height设为0让四边边框互相挤只留一条边有色。.triangle{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:15px solid #ff4d4f;}想朝右把bottom换成left再把颜色换到right自己转方向。升级聊天气泡小尾巴.bubble{position:relative;padding:10px 15px;background:#fff;border:1px solid #ddd;border-radius:6px;}.bubble::after{content:;position:absolute;bottom:-8px;left:20px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #fff;/* 和背景同色 */}.bubble::before{content:;position:absolute;bottom:-9px;left:20px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #ddd;/* 边框色 */}双层三角阴影边框全搞定老前端看了都说内行。骚操作2border旋转loadingdivclassloader/divstyle.loader{width:40px;height:40px;border:4px solidrgba(0,0,0,.1);border-top-color:#09f;/* 只留上边有色 */border-radius:50%;animation:spin .6s linear infinite;}keyframesspin{to{transform:rotate(360deg)}}/style一行标签十行CSS比gif省流量比lottie省bundle性能yyds。1px边框在移动端变粗——“物理像素”背锅假设设备像素比dpr2UI要你1pxCSS写1px实际渲染2物理像素看上去就“粗”。主流hacktransform缩小一半.hairline{position:relative;}.hairline::after{content:;position:absolute;left:0;bottom:0;width:100%;height:1px;background:#ddd;transform:scaleY(.5);transform-origin:bottom;}dpr3就scaleY(.33)写个mixin自动判断mixin hairline($dir:bottom,$color:#ddd){ position:relative; ::after{ content:; position:absolute; #{$dir}:0; left:0; #{if($dirleft or $dirright,width,height)}:1px; background:$color; transform:#{if($dirleft or $dirright,scaleX,scaleY)}(.5); transform-origin:#{$dir}; } }border-image把边框换成图但IE劝退.fancy{border:20px solid;border-image:url(frame.png)30 round;}语法slice / width / outset / repeat四个参数堪比天书IE11只支持老式语法想兼容得再写一套fallback。结论除非设计师拿刀架脖子否则能用border-radiusbackground模拟就别碰border-image。调试神器临时荧光border*{border:1px solid #0f0!important;}一行代码全站变“绿巨人”元素边界瞬间现形调完即删谁用谁知道。——“哥生产环境忘了删怎么办”那就准备社死绿色边框配红error圣诞风提前上线。SCSS变量统一边框设计token$border-color-light:#ebebeb; $border-color-base:#d9d9d9; $border-color-dark:#bfbfbf; $border-radius-sm:2px; $border-radius:4px; $border-radius-lg:8px; .btn{ border:1px solid $border-color-base; border-radius:$border-radius; }换主题改变量一键同步比全局搜索replace靠谱一万倍。设计师给的“微妙灰”到底取哪个用吸管工具一吸#eeeeee看似完美放到深色背景直接“高亮”。正确姿势让设计师给透明度用rgba写死border-color:rgba(0,0,0,.08);/* 任何背景都能融合 */flex/grid里border会抽风吗不会它们只负责布局不抢border饭碗。但要注意gap和border同时存在时视觉间距会叠加做“中间分隔线”时直接用gap伪类即可别给每个item写右边框再last-child:none太蠢。兼容性老坑合集IE6/7dotted渲染成dashed圆角直接罢工——“用图片垫背”。安卓4.3border-radiusbackground渐变圆角外侧出现毛边——“background-clip:padding-box”可救。Safariborder-imageround偶尔出现“裁图不对齐”——“加transform:translateZ(0)强刷图层”。面试官不用图标纯CSS画对话框甩他脸上divclassdialog今天面试稳了/divstyle.dialog{position:relative;width:200px;padding:12px;background:#fff;border:1px solid #ddd;border-radius:6px;}.dialog::before{content:;position:absolute;left:-8px;top:16px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #ddd;}.dialog::after{content:;position:absolute;left:-7px;top:16px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #fff;}/style双层三角边框背景完美对齐面试官点头如捣蒜。彩蛋borderclip-path做“动态缺口”.cut{width:200px;height:60px;border:2px solid #09f;clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%);transition:clip-path .3s;}.cut:hover{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}鼠标滑过缺口瞬间“长回去”纯CSS零JS绩效1。收尾吐槽border这货就像小区门卫天天见觉得人家普通真出事才发现它啥都能干。今天30分钟带你撸完20属性、10来个骚操作代码直接复制就能跑。别再放收藏夹吃灰现在立刻马上打开VSCode敲一遍下回面试把border甩面试官脸上——“哥边框自由我已经拿到了薪资条也该涨涨吧”欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐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等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进