简单实用的cssborder属性border

时间：2023-03-31 12:58:09 CSS

本文主要讲的是利用border属性制作不同的几何形状，以适合更美观的视觉风格。预备知识边框相关属性border-widthborderwidthborder-styleborderstyleborder-colorbordercolorexampleexample为了更容易理解，demo使用了最简单的dom元素和css属性产品介绍

产品回顾

.border{边距：50px自动；宽度：540px；字体大小：18px；行高：40px；text-align:center;}.border-left{宽度:260px;高度：40px；背景：#f3941d；向左飘浮;颜色：#fff;}.border-icon{宽度：0px;高度：0；边框宽度：402000；边框样式：实心；;float:left;}.border-right{宽度:260px;高度：40px；浮动：对；背景：#f5d7b7；color:#aaa;}上面的css代码着重在左边较深的颜色和右边较浅的颜色中间有一个triangle.border-icon

.content{margin:60pxauto;宽度：540px；高度：自动；位置：相对；border-top:1pxsolid#ddd;}.border{position:absolute;边距顶部：-15px；margin-left:20px;}.text{背景:#e14340;高度：70px；宽度：60px；80像素；颜色：#fff；text-align:center;}.small-triangle{position:absolute;宽度：0；高度：0；边框宽度：15px10px0px0px；#fff#c33a37#ccc#ddd;margin-left:-10px;}.big-triangle{width:0;高度：0；边框宽度：8px30px；边框样式：实心；border-color:#e14340#e14340#fff#e14340;}上面的css代码着重于左侧颜色较深的小三角形。小三角形和底部的三角形。大三角原理分析那么border属性是如何变化成不同的几何形状的呢？.border1{宽度：0;高度：0；边框宽度：20px20px20px20px；边框样式：实心；边框颜色：#aaa#bbb#ccc#ddd;}看上面样式生成的内容。我们可以通过border-widthborder-color任意改变每个变量的宽度和高度，颜色的任意组合可以组成不同的其他几何图形组成的三角形。塑造。更多内容，请关注微信公众号：有一个女孩在努力学习编码，快乐编码

上一篇：Web前端开发的自学路线是什么？html+css+JavaScript的学习方法

下一篇：微信公众号代码块插入，一键排版

简单实用的cssborder属性border相关文章