When Backgrounds & Borders Level 3 is still a draft, CSS WG will be a lot of discussion in support of multiple border problem, like a discussion of multiple background images the same. Unfortunately, at that time that use multiple border is not large, even if it takes you can also use the border-image property to simulate. However, WG apparently forgotten the flexibility to adjust the border in CSS code, is what we need, and now developers can use some tools to simulate multiple Hack borders, such as the use of multiple nested elements to simulate multiple border. Now, I will tell you some of the better methods, without the use of extra labels can achieve multiple border. Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
box-shadow Solutions
Now, most of the time are used to create a shadow box-shadow. However, few people know that it accepts the fourth parameter (spread), this parameter can be scaled range of shadows. Such as the following example, we create a horizontal and vertical offset of the shadow of 0, it uses the above-mentioned fourth parameter:
CSS Code copied to the clipboard
background: yellowgreen;
box-shadow: 0 0 0 10px #655;
Results as shown below:
Legend: simulation using box-shadow border line
Surprisingly, this is not enough, because we use it and create border border almost. However, strong it is that we can use commas to create any number of shadows. So, just we need to continue to add shadow can achieve multiple shadows, and for example, add a color to deeppink border:
CSS Code copied to the clipboard
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
The only thing to keep in mind, box-shadow property are stacked together, the first shadow is always located at the top, so you need to adjust the size of the shadow. For example, on a piece of code, we hope that the outermost border is 5px, then we can set up a shadow 15px (10px + 5px) of. If you need to, you can specify that any level of shadow:
CSS Code copied to the clipboard
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
Except for a few cases below, using the box-shadow solution very easy to use:
Shadow is not a border, they do not occupy real space, can not be attributed to a range of box-sizing. However, you may margins or margins (depending shadow is internal or external) occupy additional space is simulated by using inside.
The above is an example of analog located outside the border element. It can not capture mouse events similar to hover and click. If the event is important, you can make shadows appear inside the element by adding inset keyword. Note that you may need to add extra padding to expand the space.
outline solutions
In some cases, if we only need two borders, then we only need one regular and one border outline can be achieved. This also allows us to maintain borders sufficient flexibility in style (for example, we want a dashed border), but using box-shadow, we can only simulate a solid border. As shown below:
NOTE: Use the analog two box-shadow contour lines
CSS Code copied to the clipboard
background: yellowgreen;
border: 10px solid #655;
outline: 15px solid deeppink;
Another benefit of using the outline is that we can control outline by outline-offset distance element to the border, the property can even accept negative. This is useful for many effects, as shown below:
* Note: For dash pattern contour outline-offset by negative values to create the effect of a basic sewing *
However, this method has some limitations:
Like at first said, this method can only simulate two borders, because each element can only create an outline. If you need to create multiple borders, you can only use the box-shadow.
border-radius does not allow the presentation outline rounded corners, so even if you are rounded border, outline remains at right angles (as shown). Note, CSS WG think this is a bug, border-radius in the future it may be possible to outline changes to the fillet.
According to CSS User Interface Level 3 specification statement: ". Outliens may not be rectangular," though in most cases it looks like a rectangle, but when you use this method, or the need for cross-browser testing.
Legend: created by contour outline did not fit together rounded elements, this problem can be fixed in a future
border-colors Solutions
border-colors is a unique property, it is literally a multi-border born, but unfortunately, so far this is only a Gecko browser kernel's unique attributes.
If you do not pursue browser compatibility, the border-colors can also achieve the effect of multi-frame. In the specific use, divided into four sides of the border need to write:
CSS Code copied to the clipboard
-moz-border-top-colors: *; / * frame top edge * /
-moz-border-right-colors: *; / * the right border * /
-moz-border-bottom-colors: *; / * bottom border * /
-moz-border-left-colors: *; / * the left border * /
While this approach can achieve multi-border effects, but compared to the first two terms of solutions to some trouble, look at a simple example:
CSS Code copied to the clipboard
border: 10px solid;
-moz-border-top-colors: red red red red green green green blue blue blue;
-moz-border-bottom-colors: red red red red green green green blue blue blue;
-moz-border-right-colors: red red red red green green green blue blue blue;
-moz-border-left-colors: red red red red green green green blue blue blue;
为了要实现三个颜色的多边框效果，red占4px，green占3px和blue点4px。需要大费周折。而且还不能直接写border-colors，因为浏览器不识别这样的属性。
除此之外，目前浏览器对这个属性支持度相当的弱。可以说，它只是Firefox的私有属性。
CSS透明边框
对 CSS 中的半透明颜色可能已经有了基础的了解，比如 rgba() 和 hsla()。从 2009 年开始，虽然在开发设计中使用它们需要付出一些代价，比如提供降级措施、使用IE滤镜，但是总得来说它是一个巨大的变革。不过在实际中，它们主要被用于背景，有这么几点原因：
早期的开发者没有意识到这些新属性就是类似 #ff0066 和 orange 的色彩，而是将它们看作是图片，所以仅用在了背景上。
为背景提供降级方案比其他属性更简单。比如，可以直接使用单像素的半透明图片替代半透明背景。对于其他属性，则只能使用不透明颜色。
在其他属性上使用半透明颜色，比如边框，并不简单，我们将在下文介绍原因。
图注：24ways.org 是第一个在设计中使用半透明颜色的网站，那时还是 2008 年，那时它们网站的特点就是使用了大量的背景(由 Tim Van Damme 设计)
假设我们想要美化一个容器，让它拥有一个白色的和半透明白色的边框——这个半透明边框可以让它后面的内容显示出来。我们要做的第一步就像是下面这样：
CSS Code复制内容到剪贴板
border: 10px solid hsla(0,0%,100%,.5);
background: white;
除非你非常了解background和border这两个属性的工作原理，否则上面代码得到的结果会让你感到非常的困惑。边框哪里去了呢?是不是不能为边框添加半透明颜色呢?到底该怎么做?
图注：第一次尝试实现半透明边框
解决方案
虽然看起来的效果和预期有所差异，其实边框是存在的。实际上，背景色默认会扩展到边框上，这一点可以通过给边框添加虚线观察到。如下图所示：
图注：背景默认会扩展到边框区域下方
虽然这和你使用不透明的实线边框是一样的，但在这个示例中，它完全推翻了我们的预期。结果看起来是纯白色的边框，实际上是一个半透明白色的边框，然后在它下面是白色的背景色。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
在 CSS 2.1 中，这就是 background 的工作原理。我们不得不接受和使用它。值得庆幸的是，在Backgrounds & Borders Level 3中，我们已经可以使用background-clip 属性来调整这一效果。background-clip的默认值为border-box，也就是说，背景色会填充到容器边框以及边框以内的地方，所以我们只需要将其修改为padding-box(让背景色在容器的内边距以及内边距以内填充)就可以实现所需要的效果了：
CSS Code复制内容到剪贴板
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
更完善的效果如下图所示：
图注：修正了 background-clip 的问题
总结
Although able to use rgba on border-color (), hsla () to set the border translucent or completely transparent, if the element set the background color or background image when the transparent color effect will directly affect the border. In particular, under the border to see the contents of the time. This phenomenon is due to the background image will extend to the bottom border. To solve this problem, it can be corrected by CSS3's background-clip. @Chris Coyier As early as 2010, when it is introduced in detail in the CSS-Tricks knowledge in this area
