简单实用的css属性:border

1,801 阅读1分钟

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

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

预备知识

border相关属性

  • border-width 边框的宽度

  • border-style 边框的样式

  • border-color 边框的颜色

预备知识掌握完成后

接下来看几个实际的小例子吧

案例举例

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

1.

上图中重要的点就是斜边是如何产生的呢?

上代码:

关键的样式部分

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

2.

上图的难点的是头部的小三角和底部的大三角

上代码:

关键的样式部分

demo是看完了

那上面的内容到底是怎么出来的呢?

原理解析

border属性为何能变化不同的几何图形呢

先看下面这段样式

上述样式产生的形状

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

赶紧动手写起来吧。