CSS揭密(背景和边框特殊技巧)

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

1、半透明边框无法显示问题
问题描述:当我们给一个背景为白色的盒子设置半透明边框的时候,会发现边框无法正常的显示,
如下图所示,中间的盒子已经设置了边框。
background-color: white; border: 10px solid hsla(0, 0%, 100%, .5);

CSS揭密(背景和边框特殊技巧)
文章图片

分析:这个问题产生的原因很简单,是因为默认的情况下,设置的背景会延伸展到border的下方去,我们可以设置一个虚点的边框来试验一下。可以清楚的看到白色的背景直接延伸到dot border的下方,这就导致了我们上面半透明的border直接被下方白色的背景透上来,无法显示。
background-color: white; border: 10px dotted blue;

CSS揭密(背景和边框特殊技巧)
文章图片

解决方案:通过background-clip属性可以解决这个问题,该值默认为border-box,就是背景会拓展到border下方,我们只需要设置background-clip:padding-box就可以让padding分割背景,不影响border的效果,最终解决问题。
background-clip: padding-box;
CSS揭密(背景和边框特殊技巧)
文章图片

2、多重边框border的实现
问题描述:有这样的需求,需要盒子padding的外边有不止一层的border,而border本身不能设置多层,多次设置只会覆盖之前的。

border: 10px dotted blue; border: 10px solid green;

CSS揭密(背景和边框特殊技巧)
文章图片

分析:有两种方案可以代替实现多重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;

CSS揭密(背景和边框特殊技巧)
文章图片

方式二:使用outline
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。可以在设置border的基础上在设置一层outline实现视觉效果上的两层border,但最多也就只能两层。
outline: 5px solid green; border: 5px solid yellow;

CSS揭密(背景和边框特殊技巧)
文章图片

3、背景的定位技巧
问题描述:我们正常需要将背景图定位到盒子中的某个位置,会使用background position属性来设置偏移,但若想让偏移量始终和外边盒子的padding值保持一致,就需要在每次padding改变时改变对应的偏移值,有没有其他方法替代?

如下所示,需要每次padding改变,都让内部的图片定位与padding保持一致。
CSS揭密(背景和边框特殊技巧)
文章图片

我么可以使用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、条纹背景的实现
问题描述:如何实现类型下面的条纹背景效果?

CSS揭密(背景和边框特殊技巧)
文章图片
CSS揭密(背景和边框特殊技巧)
文章图片

可以结合渐变的效果和background-clip来实现,首先看下渐变的相关资料。
正常设置渐变的颜色和方向能实现颜色的变换效果,如下:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

CSS揭密(背景和边框特殊技巧)
文章图片

可以设定渐变颜色的比例来控制其占据背景图的区域,若设置两个颜色分别为50%可以实现颜色均匀切分背景图;
CSS揭密(背景和边框特殊技巧)
文章图片

这时候用background-clip控制图片大小,再由于图片会自动重复铺满整个盒子,就可以实现基本的竖直条纹效果。
background-size: 20px 100%;
CSS揭密(背景和边框特殊技巧)
文章图片

可以设置渐变的角度,实现斜向的条纹效果,首先实现45度角倾斜,让两个颜色分别占据一定比例
background-image: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);

CSS揭密(背景和边框特殊技巧)
文章图片

最后,计算出能实现条纹效果的最合适的大小,也就是斜边大小,也就是直角边的根号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揭密(背景和边框特殊技巧)】CSS揭密(背景和边框特殊技巧)
文章图片

    推荐阅读