简单实用的边框属性 border

Question

本文主要讲述利用 border 属性做出不同的几何形状从而适用于比较好看的视觉样式。

开始前我们需要掌握什么知识点呢？

预备知识

border 相关属性

• border-width 边框的宽度
• border-style 边框的样式
• border-color 边框的颜色

预备知识掌握完成后，接下来看几个实际的小例子吧！

案例举例

为了更加通俗易懂，demo 用的是最简单的 dom 元素和 css 属性

上图中重要的点就是斜边是如何产生的呢？上代码：

关键的样式部分

很简单的就完成了这个斜边的操作功能

上图的难点的是头部的小三角和底部的大三角，上代码：

关键的样式部分

demo 是看完了，那上面的内容到底是怎么出来的呢？

原理解析

border 属性为何能变化不同的几何图形呢？先看下面这段样式

上述样式产生的形状

我们通过 border-width border-color 可以任意变化每一条变的宽高，和颜色。任意组合就能组成不同的由三角形组成的其它几何形状了。