关于css:CSS揭密背景和边框特殊技巧

 目录：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;