目录：
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;
【CSS揭密（背景和边框特殊技巧）】
文章图片
