boder的内边框_CSS：border边框的巧用

边框，是项目中最常用的属性之一，我们写过的最多的应该是border: 1px solid xxx了吧。那么，我们有没有想过它的出现不止存在于此呢？

下面我们就来讨论一下，一些不常用却很有用的特性。

border-width

先来认识一下border-width，除了数值之外的几个关键词：

thin：对应数值1px。

medium(默认值)：对应数值3px。

thick：对应数值4px。

因为border-style有一个double属性值，所以才将border-width的默认值定为3px。

border-style

border-style的默认值是none而不是solid，所以如果只是给border-width定义宽度是无法显示边框的。border-style的属性值很多，有几个比较常用，如solid、dashed、dotted等比较好理解，这里不多做介绍。

border-style: double表示双线边框，而且两根线都是实线。这个属性值我们在实际开发中用的少，但是它的兼容性很好。根据border-width大小不同，它的表现规则如下：

border-style: double表现规则

从它的表现规则中，我们了解到一个很明显的规律，就是除去1px外，其他情况下的双线一直保持等宽的状态，1px时遵循了单实线原则。

观察双线框规则，我们可以利用它的特性做一些小图标，例如常见的“菜单”图标，代码如下：

.icon-menu{

width: 120px;

height: 20px;

border-top: 60px double;

border-bottom: 20px solid;

}

菜单图标

border-color

border-color也有默认值，它的默认颜色就是color色值，简单来说就是，在不设定border-color属性值的情况下，它会使用当前元素的color属性值作为边框颜色。

例如，下面这段代码：

.block{

width: 200px;

height: 50px;

border: 2px solid;

color: red;

padding: 20px;

}

border-color默认色值

那么，这个特性在实际开发中有没有用处呢？我们举一个简单的例子来说明一下，我们写一个边框按钮的时候，通常将文本和边框取一种颜色，然后hover的时候会有颜色变化。此时，我们就可以这样写：

.button{

color: #f80;

border: 1px solid;

padding: 6px 10px;

border-radius: 4px;

text-decoration: none;

}

.button:hover{

color: #f30;

}

原按钮

hover时的按钮

border使用的一些小技巧

(1)background右下方定位

我们都知道background-position的属性值是相对于top和left的的数值，那么在宽度不固定的情况下我们想要实现右下方特定数值定位该怎么做呢？这里介绍一种使用border来达到这样效果的解决方案。

代码如下：

.background{

width: 300px;

height: 100px;

border-bottom: 10px solid transparent;

border-right: 50px solid transparent;

background: url("imgs/L1000115.JPG") #f5f5f5 no-repeat;

background-size: 100px 50px;

background-position: 100% 100%;

box-sizing: border-box;

}

利用border实现background右下角定位

这里利用的是背景图片的定位原理，默认背景图片是相对于padding box定位的，也即是background-position: 100%的位置是不包含border-width的。

(2)增加点击热区

我们也可以利用border来增加一些图标的点击热区，例如下面这段代码：

.hot-zone{

width: 20px;

height: 20px;

border: 10px solid transparent;

}

增加点击热区

(3)图形绘制

border属性可以很好地实现兼容性很好的三角形效果，这里直接上代码。

.triangle-down{

width: 0;

border: 10px solid;

border-color: #f60 transparent transparent;

}

.triangle-narrow{

width: 0;

border-width: 20px 10px;

border-style: solid;

border-color: #f60 transparent transparent;

}

.triangle-corner{

width: 0;

border-width: 20px 10px;

border-style: solid;

border-color: #f60 #f60 transparent transparent;

}

border绘制三角形

(3)border等高布局

等高布局是指，各模块高度都是相等且根据内容进行变化的，这个高度是由较高模块的高度决定的。

下面我们来看一段代码：

.container{

font-size: 16px;

border-left: 150px solid #FF7F00;

background-color: #FFE4B5;

}

.container::after{

content: '';

display: block;

clear: both;

}

.nav{

width: 150px;

margin-left: -150px;

float: left;

}

.nav-item{

text-align: center;

line-height: 40px;

color: #fff;

}

.content{

overflow: hidden;

}

.content-item{

line-height: 40px;

padding: 0 10px;

}

等高布局对比图1

等高布局对比图2