用css写的那些特色边框

本文参考《css揭秘》第二章。

一、半透明边框

说起透明，肯定第一个想到的是css3的hsla，写个demo：

小tips：HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。HSLA是在HSL的基础上增加一个透明度(A)的设置。

H：

Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝/色，也可取其他数值来指定颜色。取值为：0 - 360

S：

Saturation(饱和度)。取值为：0.0% - 100.0%

L：

Lightness(亮度)。取值为：0.0% - 100.0%

A：

Alpha透明度。取值0~1之间。

从上面的demo中可以看出，虽然并没有看到我们的边框，但是实际上边框是存在的，默认情况下，北京会延伸到边框所在的区域下层。不信的话，我们可以

换个明显的颜色。

第二个demo可以看出，我们所做的边框并没有让body的北京从半透明白色边框处透上来，而是在半透明白色边框处透出了这个div自己的纯白色背景。

·······因此我们引入一个新的属性：background-clip，此属性规定了背景的绘制区域。默认是border-box。(详细解释请见 CSS3 background-clip 属性)

完活！

点击看在线demo!!!

二、多重边框

1、box-shadow方案

提到多重边框，首先应该想到的属性应该就是box-shadow了，语法：

tips：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词

来规定。省略长度的值是 0。 （详细解释请见CSS3 box-shadow 属性）

box-shadow支持逗号分隔语法，可以创建任意数量的投影，而且是层层叠加的。

先来一个小demo：

此方案需注意：

投影的行为跟边框不完全一致，因为它不会影响布局，而且也不会受到box-sizing的影响。不过，还是可以通过内边距或外边距（这取决于投影是

内嵌还是外扩的）来额外模拟出边框所需要占据的空间。

上述方法所创建出的边框是在元素的外圈，不会影响鼠标事件。还可以给box-shadow属性加上inset关键字，来使投影绘制在元素的内圈。

2、outline方案

先来了解一下outline，outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓线不会占据空间，也不一

定是矩形。该属性的三个属性值，分别代表：

• outline-color
• outline-style
• outline-width

（详细解释请见CSS outline 属性）

demo请戳 https://jsfiddle.net/amberxixi/5j5q2oq1/

这个方案也有需要注意的几点：

outline做的边框不一定贴合border-radius属性产生的圆角，因此如果元素是圆角的，它的描边可能还是直角，（请注意：这种行为被CSS工作组认为是一个bug）来看下效果：

以上。

周一快乐！