目录：1、半透明边框无奈显示问题2、多重边框border的实现3、背景的定位技巧4、条纹背景的实现

1、半透明边框无奈显示问题

问题形容：当咱们给一个背景为红色的盒子设置半透明边框的时候，会发现边框无奈失常的显示，
如下图所示，两头的盒子曾经设置了边框。
background-color: white;border: 10px solid hsla(0, 0%, 100%, .5);

剖析：这个问题产生的起因很简略，是因为默认的状况下，设置的背景会延长展到border的下方去，咱们能够设置一个虚点的边框来试验一下。能够分明的看到红色的背景间接延长到dot border的下方，这就导致了咱们下面半透明的border间接被下方红色的背景透上来，无奈显示。

background-color: white;border: 10px dotted blue;

解决方案：通过background-clip属性能够解决这个问题，该值默认为border-box，就是背景会拓展到border下方，咱们只须要设置background-clip：padding-box就能够让padding宰割背景，不影响border的成果，最终解决问题。

background-clip: padding-box;

2、多重边框border的实现

问题形容：有这样的需要，须要盒子padding的外边有不止一层的border，而border自身不能设置多层，屡次设置只会笼罩之前的。
border: 10px dotted blue;border: 10px solid green;

剖析：有两种计划能够代替实现多重border的成果：
形式一：应用border-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

border-shadow如果不设置偏移和暗影，就能够看作border成果，且shadow是能够重叠定义的，实现如下。

box-shadow: 0px 0px 0px 5px black, 0px 0px 0px 10px yellow;

形式二：应用outline
outline （轮廓）是绘制于元素四周的一条线，位于边框边缘的外围，可起到突出元素的作用。能够在设置border的根底上在设置一层outline实现视觉效果上的两层border，但最多也就只能两层。

outline: 5px solid green;border: 5px solid yellow;

3、背景的定位技巧

问题形容：咱们失常须要将背景图定位到盒子中的某个地位，会应用background position属性来设置偏移，但若想让偏移量始终和外边盒子的padding值保持一致，就须要在每次padding扭转时扭转对应的偏移值，有没有其余办法代替？

如下所示，须要每次padding扭转，都让外部的图片定位与padding保持一致。

我么能够应用background-origin形式

background-image: linear-gradient(to right, red, blue);

实现，这个属性设置背景图绝对于什么地位来定位。

background-origin: padding-box|border-box|content-box;

该值默认为将其设定为padding-box，将其设定为content-box，而后设置偏移为right 0，bottom 0，就能实现背景图绝对父盒子的padding进行偏移。

4、条纹背景的实现

问题形容:如何实现类型上面的条纹背景成果？


能够联合突变的成果和background-clip来实现，首先看下突变的相干材料。
失常设置突变的色彩和方向能实现色彩的变换成果，如下：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

能够设定突变色彩的比例来管制其占据背景图的区域，若设置两个色彩别离为50%能够实现色彩平均切分背景图；

这时候用background-clip管制图片大小，再因为图片会主动反复铺满整个盒子，就能够实现根本的竖直条纹成果。
background-size: 20px 100%;

能够设置突变的角度，实现斜向的条纹成果，首先实现45度角歪斜，让两个色彩别离占据肯定比例

background-image: linear-gradient(45deg,          #fb3 25%, #58a 0, #58a 50%,          #fb3 0, #fb3 75%, #58a 0);

最初，计算出能实现条纹成果的最合适的大小，也就是斜边大小，也就是直角边的根号2倍，实现成果。

background-image: linear-gradient(45deg,          #fb3 25%, #58a 0, #58a 50%,          #fb3 0, #fb3 75%, #58a 0);      background-size: 42.426406871px 42.426406871px;