内容：1.半透明边框无法显示的问题2.多边框的实现3.背景的定位技巧4.条纹背景的实现1、半透明边框无法显示的问题描述：当我们给一个白色背景的盒子设置半透明边框时，会发现边框无法正常显示。如下图，中间的框已经设置了边框。背景色：白色；border:10pxsolidhsla(0,0%,100%,.5);分析：这个问题的原因很简单，因为默认情况下，设置的背景会延伸到边框下面去，我们可以设置一个虚线边框来试验一下。可以清楚的看到白色背景直接延伸到点边框下方，导致我们上方的半透明边框被下方的白色背景直接暴露而无法显示。背景色：白色；边框：10px蓝色虚线；解决方案：这个问题可以通过使用background-clip属性来解决，默认为border-box，即背景会延伸到边框以下。我们只需要设置background-clip:padding-box，让padding分割背景，不影响border的效果，最终解决问题。背景剪辑：填充框；2、多重边框的实现问题描述：有这样一个需求，盒子的padding外必须有不止一层的边框，而且边框本身不能设置为多层。多个设置只会覆盖之前的。border:10pxdottedblue;border:10pxsolidgreen;分析：有两种方案可以替代多边框效果：方法一：使用border-shadowbox-shadow:h-shadowv-shadowblurspreadcolorinset;border-shadow如果不设置offset和shadow，可以看成是边框效果，可以重叠定义shadow，实现如下。框阴影：0px0px0px5px黑色，0px0px0px10px黄色；方法二：使用outlineOutline（轮廓）是在元素周围绘制的一条线，位于border边缘的外围，可以突出元素。可以在设置border的基础上再设置一层outline，在视觉上达到两层border的效果，但最多只有两层。轮廓：5px纯绿色；边框：5px纯黄色；3.背景定位技巧问题描述：我们正常情况下需要将背景图片定位在框内的某个位置，我们会使用背景position属性来设置偏移量，但是如果我们想让偏移量一直和padding保持一致outerbox的值，所以每次padding变化时都需要改变对应的offset值。有没有其他方法可以替代它？如下图，每一次padding变化，内部图片定位都要和padding保持一致。我们可以使用背景原点方法background-image:linear-gradient(toright,red,blue);为了实现，这个属性设置了背景图片的相对位置。background-origin:padding-box|border-box|content-box;该值默认设置为padding-box，设置为content-box，然后设置offset为right0，bottom0，就可以实现背景图片相对于父box的padding的偏移。4.条纹背景的实现问题描述：如何实现type下的条纹背景效果？它可以通过结合渐变效果和背景剪辑来实现。首先看梯度的相关信息。一般设置渐变的颜色和方向即可实现颜色变换效果，如下：background-image:linear-gradient(direction,color-stop1,color-stop2,...);可以设置渐变色的比例来控制其占用背景图的面积，如果两种颜色分别设置为50%，则可以按颜色平分背景图；这时候用background-clip控制图片的大小，由于图片会自动重复覆盖整个方框，基本垂直直条纹效果。背景大小：20px100%；您可以设置渐变角度以实现斜条纹效果。首先，做到45度角倾斜，让两种颜色占据一定的比例。背景图像：线性渐变（45deg，#fb325%，#58a0，#58a50%，#fb30，#fb375%，#58a0）；最后计算最合适的可以达到条纹效果的尺寸，也就是斜边的尺寸，也就是直角边的根数乘以2次，达到效果。背景图像：线性渐变（45deg，#fb325%，#58a0，#58a50%，#fb30，#fb375%，#58a0）；背景大小：42.426406871px42.426406871px；
