一.多重边界[1]

背景:box-shadow，outline鉴于使用场景的多样性，多边框的设计越来越多。以前可以借助border-image属性来应对，但是这个在css代码层面上不是很灵活。现在我们使用框阴影和轮廓属性分别实现多个边界。1.box-shadow方案思路:利用box-shadow的第四个参数(扩展半径)的大小，多投影码的例子:

<div class="border-multiple"> 多重边框实现方案一：box-shadow </div> .border-multiple { margin: 50px auto; padding: 20px; width: 600px; background-color: #fff; box-shadow: 0 0 0 10px #f0f, 0 0 0 15px #00f, 0 2px 15px 15px rgba( 0, 0, 0, .8); }

多边框-框-阴影

总结:

1.阴影不会影响布局，也不会受到框大小的影响。2.支持逗号分隔语法，可以创建任意数量的投影。3.缺点:只能实现实线边框，不能实现其他样式。

2.大纲方案代码示例:

<div class="border-outline"> 多重边框实现方案二：outline </div> .border-outline { margin: 200px auto; padding: 20px; width: 600px; background-color: #ff0; outline: 3px dashed #0f0; outline-offset: -10px; }

多边框-轮廓

总结:

1.前提是实现了两层边界。2.可能需要轮廓偏移的属性值。3.轮廓的笔画默认为矩形，有圆角会被认为是bug。4.不支持逗号语法。

二、边框圆角[2]

背景:框-阴影，轮廓为了解决上面例子总结3中的bug，可以使用框-阴影扩展半径来填充圆角和轮廓之间的空间隙。代码示例:

<div class="inner-rounding"> 需要借助 box-shadow、outline、“多重边框”来实现注意点： box-shadow 的扩展半径应该是圆角半径的 0.5倍 </div> .inner-rounding { background-color: #ccc; margin: 50px auto; padding: 20px; width: 600px; padding: 20px; border-radius: 20px; box-shadow: 0 0 0 10px #f00; outline: 10px solid #f00; }

注意:盒形阴影的展开半径应为圆角半径的0.5倍；严格来说应该是(√2-1)倍。这里取0.5倍是为了更好的计算。

边框圆角

三。半透明边框[3]

背景:rgba或hsla颜色属性，背景剪辑想法:使边界出现在裁剪背景的填充框中。代码示例:

<div class="border-opacity"> 半透明边框的实现 </div> .border-opacity { margin: 50px auto; padding: 20px; width: 600px; border: 10px solid hsla(0, 0%, 100%, 0.5); background-color: #fff; background-clip: padding-box; }

总结:

半透明边框的实现需要借助css3的背景剪辑属性。背景剪辑有三个属性:1 .border-box:背景裁剪到边框框(看不到边框)2。padding-box:背景被裁剪到内边距框(可以看到边框)。

3、content-box: 背景被裁剪到内容框（边框紧贴着内容）

半透明边框效果图

四。连续图像边框[4]

背景:css渐变，基本边框图像，背景剪辑。先来看看border-image是如何实现图像边框的:border-image的原理是九宫格扩展法:将图片剪成九块，然后分别应用到元素边框的相应边和角上。代码示例:

<p class="border-image">border-image 的实现原理是九宫格伸缩法：把图片切割成九块，然后把它们应用到元素边框相应的边和角。</p> <p class="border-image">我们并不想让图片的某个特定部分固定在拐角处；而是希望出现在拐角处的图片区域是随着元素宽高金额边框厚度的变化而变化的。</p> .border-image { border: 40px solid transparent; border-image: 33.334% url("http://csssecrets.io/images/stone-art.jpg"); padding: 1em; max-width: 20em; font: 130%/1.6 Baskerville, Palatino, serif; } .border-image:nth-child(2) { margin-top: 1em; border-image-repeat: round; }

边界图像渲染

缺点:我们不希望画面的某个特定部分固定在角落；相反，您希望出现在角上的图像区域会随着边框的宽度、高度和厚度而变化。怎么解决？实施思路:1。使用css渐变和背景延伸；2.在背景图片上叠加一层纯白的纯色背景；3.为了使下层背景透过边界区域出现，需要为两层背景指定不同的背景裁剪值；4.设置多个背景底部的背景颜色；你需要使用从白色到白色的css渐变来模拟纯白纯色背景的效果。

代码示例:

<p class="contituous-images">实现思路： 1、利用 css 渐变和背景的扩展 2、在背景图片上，在叠加一层纯白的实色背景 3、为了让下层的背景透过边框区域显示出来，需要给两层背景指定不同的 background-clip 值 4、在多重背景的最底层设置背景色，需要用一道从白色过渡到白色的 css 渐变来模拟出纯白色实色背景的效果 </p> .contituous-images { padding: 1em; border: 1em solid transparent; /* background: linear-gradient(white, white), url(http://csssecrets.io/images/stone-art.jpg); background-size: cover; background-clip: padding-box, border-box; background-origin: border-box; */ /* background 还可简写如下 */ background: linear-gradient(white, white) padding-box, url(http://csssecrets.io/images/stone-art.jpg) border-box 0 / cover; width: 21em; padding: 1em; overflow: hidden; /* 边框可拖拽 */ resize: both; font: 100%/1.6 Baskerville, Palatino, serif; }

连续图像边框

您还可以使用渐变图案实现信封样式的边框代码示例:

<p class="envelope-border">还可以通过渐变图案实现信封样式的边框</p>.envelope-border { padding: 1em; border: 0.5em solid transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 3em 3em; max-width: 20em; font: 100%/1.6 Baskerville, Palatino, serif;}