首页 > 其他 > 详细

单个div元素实现双边框

时间:2019-07-25 11:07:20      阅读:112      评论:0      收藏:0      [点我收藏+]

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

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

  伪元素实现

  box-shadow

  outline

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

技术分享图片

 

 

1.伪元素实现

 技术分享图片

 效果:

  技术分享图片

 

2.使用box-shadow

 技术分享图片

效果:

  技术分享图片

3.outline实现

  技术分享图片

效果:

  技术分享图片

 

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

  

单个div元素实现双边框

原文:https://www.cnblogs.com/suihang/p/11242881.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!