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;

方式二：使用outlineoutline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。可以在设置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;