单个div元素实现双边框

2019/07/25 10:57
阅读数 29

昨天被问到一个很有意思的问题,单个div元素怎么实现双边框,当时脑子懵了一下,然后就回答出来用伪元素,别的实在是想不起来了,所以在此总结一下子防止以后再被问到

总结了一下大约有以下几种方案:

  伪元素实现

  box-shadow

  outline

下面我们来具体看看实现方法,为了看上去效果更好,我将直接使用VSCode里面的截图,各位想拉代码自己试试的,别想复制了,自己动手打一遍吧

 

 

1.伪元素实现

 

 效果:

  

 

2.使用box-shadow

 

效果:

  

3.outline实现

  

效果:

  

 

暂时就考虑到了这几种,记录一下,要是有大佬知道别的方案,请一定要指点指点我,指点完了我肉偿啊,哈哈

  

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部