border-width不支持百分比

为什么？

这是由语义和使用场景绝定的。

边框，不会因为设备大，就按比例变大。

border-width支持关键字：

• thin 1px

• medium（默认） 3px

• thick 5px

为什么默认是3px？明明1px最常用

因为border-width：double至少3px才有效果。

border-style类型

• solid 实线

• dashed 虚线
  
  

• dotted 点线
  
  
  
  
  IE7/IE8可以使用dotted来做圆点
  
  
  
  
  
  
  还可以基于第一个图的基础上，添加多个图层，最终实现圆角。
  
  
  
  
  
• double 双线
  
  
  
  两边宽度总是相等的，中间间隔相对于两边宽度±1。
  
  之前的三条杠，也可以使用double实现。
  
  

border-color与color

只要一个color hover变化，就可以一起变色。

注意：transition、过渡也只要一个color属性哦。

border与background-position定位

background-position定位默认是以左上角为起始点的。

我们可以先让图片以右边缘作为起始点，backgruond-position: 100%。

再通过添加透明的border，来达到右对齐效果。

border与三角等图形构建

三角形

首先，我们需要一个没有宽、高的容器；
其次，我们从四个方向分别定义颜色，小三角只定义一边，大三角定义相连的两边。
border-width自定义。

梯形

给上面的容器，添加宽高。

模拟圆角效果

border与透明边框

这里是有2个图标的，不过左边那个设置了overflow: hidden，利用透明边框加大了整个容器。

border在布局中的应用

等高布局

左边的黑色不是背景色，是用border模拟出来的。文字内容使用了浮动。

因他它们其实都在同一个容器box里面，所以是等高的。

缺点： 不支持百分比宽度

文章部分内容总结自：

张鑫旭
视频——“慕课网——CSS深入理解之border”

论点与版权所有归原作者所有