CSS背景与边框 - 边框圆角与阴影基础用法

边框与三角形

border:border-width、border-style、border-color

border:style：dotted（点）、dashed（虚线）、solid（实线）、double（双线轮廓）、其它3D

来看个border绘制三角形的原理：

图1为border最普遍的用法，border: solid 10px #ffb6b9;。用多了你会不会就觉得border是由四个矩形边框拼接而成，但其实是错的。实际上，元素的border是由三角形组合而成，为了说明这个问题，我们继续看：

图2，我们为边框四个方向设置不同颜色，border-color: #ffb6b9 #fae3d9 #bbded6 #8ac6d1;，并加大边框宽度。

图3，我们进一步将元素的宽高设为0。我们发现，此时元素由上下左右4个三角形组成。

为了实现一个三角形，那就很简单了，我们只需将其它border边的颜色设置为白色或者透明色即可

图4，border-color: transparent transpare