css中多边框实现的方式

只有你做不到的需求,没有想不到的需求。

我们来看一下一个元素多边框的需求。对于边框我们想到的是使用border,没有错,就是这样子。但是这个属性只能实现一个边框(目前为止是这样子的)。

我们先看看一个边框:

代码如下:

用传统的方式我们无法实现多边框,只能另辟蹊径。

第一种,使用多个元素进行定位重叠(这个不演示)

第二种,使用伪元素进行定位重叠(这个不演示)

第三种,使用box-shadow实现

看看代码:

 看看实现:

利用的是box-shadow的扩张半径实现。

当然这个也是有缺点的:

1.只能实现实线边框

2.边框不能实线元素某些交互行为。

看代码:

 只有在元素区域内,才会是的背景颜色变成黑色,移动到所谓的边框上面是没有任何的效果。

第四种,outline(描边实现)。

看代码:

 效果如下:

想比box-shadow,outline可以实现虚线边框:

 

但是还是不能实现元素的某些交互,比如hover。不能随着元素的border-radius变化而变化,而第三种是可以的(自己可以去体会一下)。

用第四种我们可以实现一个简单的缝边效果:

 效果:

还是有点味道。

原文地址:https://www.cnblogs.com/jsydb/p/12590238.html