css深入理解之 border

一 border-width不支持百分比值

1 不符合客观逻辑

2 w3成都一种约定吧

3 边框本身就像是一个包裹内容的界限

类似的还有outline,box-shadow text-shadow均不支持百分比

4 边框宽度的枚举

thin：1px

medium（默认）：3px  因为border-style:double这个样式至少需要3px才会有可视化显示效果，

thick：5px

二 border-style类型

1 solid

2 dashed 虚线

虚线在chrome firefox的稀疏密度为3:1 而ie为1:1所以ie中需要与前面相比较密

3  dotted 点线

点线在ie中为圆点，而chrome和firefox为方框，因此在ie中可使用dotted点线方式圆角效果，但是这个圆角很不明显

3 double 双线

使用得比较少，double的计算规则，中间为透明

1px：0+1+0;

2px:1+0+1;

3px:1+1+1；

4px：1+2+1；

5px：2+1+2；

6px：2+2+2；

7px：2+3+2；

8px：3+2+3； 中间为+-1间隔进行，可以看出 double会将边框宽度进行等分，比如border-top：60px double red，那么将会进行这样的拆分，20+20+20 中间为透明也就会看到2跟红色等长线

也就是说双线宽度永远相等，剩余则为中间间隔，

使用double可以实现一些技巧性绘图，且兼容性非常好 如三道横杠

border-top：60px double red；border-bottom：20px solid；

4 inset 内凹

内凹使用非常少，主要用来实现一些有点点质感的样式

5 其他的一些样式一是使用非常少，而是兼容性很差

三 color与border-color

在不显式指定border-color的时候，默认使用color作为边框颜色 如border：1px solid；color：red；这里的边框将显示为红色

使用默认的颜色用途在于只需要改变color时候边框可以与之同步，比如一些使用字图图标的情况下，改变图标颜色，边框也随之改变，如 .box:hover{color:red}

四 border与background定位

1 局限

由于background的定位是相对于边框的左上角，那么要想背景在右边的时候就咋办呢？

那么我们可以将left设置为100%，但是与右边又想要距离，怎么办呢？可以使用border-right：20px solid transparent 右侧具有一个透明20像素的边框就使得背景看起来有一定的间距

五 border与三角图形

1 正三角形

比如一个span：after{width:0px;height:0px; border-width:10px;border:}

六 border透明边框

用途非常广，兼容性非常好，常常用于增加鼠标点击响应区增加，透明但是却占据区域；

1 增加响应区域大小

比如我们有一个16*16的单选框，这个时候响应区域非常小，那么增加透明边框如 border：10px solid transparent；由于边框透明了，要想再次显示边框效果，则使用边框阴影效果

box-shadow，进行边框阴影模拟，阴影内陷即可

2 增减可视渲染区域

比如我们想要一张图片改变颜色，可以使用将元素进行滤镜投影，而投影又是可以使用颜色设置，那么我们就可以将元素本身因此，但是投影并不隐藏，此时只有使用透明边框方式，看不见元素本身，因而是投影也

得到显示

如icon{position:relative left -20px;border-right:20px solid transparent;fiter:drop-shadow(20px o #ff0000;)}

七 border在布局中的应用