css中多边框实现的方式


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

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

我们先看看一个边框:

 

代码如下:

 

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

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

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

第三种,使用box-shadow实现

看看代码:

 

 看看实现:

 

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

当然这个也是有缺点的:

1.只能实现实线边框

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

看代码:

 

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

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

看代码:

 

 效果如下:

 

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

 

 

 

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

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

 

 效果:

 

还是有点味道。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM