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

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

　　伪元素实现

　　box-shadow

　　outline

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

1.伪元素实现

　

效果：

　　

2.使用box-shadow

　

效果：

　　

3.outline实现

　　

效果:

　　

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

　　

单个div元素实现双边框的更多相关文章

  1. 向 div 元素添加圆角边框：

    div { border:2px solid; border-radius:25px; }

  2. 基于单个 div 的 CSS 画图

    原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 画图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合.赞作者的这句话:Re ...

  3. 基于单个 div 的 CSS 绘图

    为什么只使用一个 Div? 2013年5月,我参加了 CSSConf,看到了Lea Verou 关于 border-radius 的演讲,你可能会认为这个属性很不起眼.但是这个演讲让我大开眼界,认识到 ...

  4. border-radius是向元素添加圆角边框的方法

    border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下 ...

  5. CSS border-right-style属性设置元素的右边框样式

    CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...

  6. css实现input文本框的双边框美化

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  8. 使 div 元素看上去像一个按钮

    使 div 元素看上去像一个按钮 div { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:b ...

  9. CSS+DIV布局初练—DIV元素必须成对出现？

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

随机推荐

  1. AJAX中的dataType

    参考ajax的api文档 dataType的类型:String ajax中的dataType的属性: text:返回纯文本字符串 json:返回json数据 jsonp:jsonp格式(我没用过) h ...

  2. 聊一聊 webpack 中的 preloading 和 Prefetching

    聊一聊 webpack 中的 preloading 和 Prefetching 提到 Preloading 和 Prefetching 就不得不先说一下代码分割,通过下面的例子我们来说明为什么需要代码 ...

  3. 五分钟了解ES6对数值的扩展

    文章目录 数值的扩展(ES6) 1. 二进制八进制表示法 2. Number对象 3. Math对象 4. 指数运算符 5. Integer 数据类型 5.1 简介 5.2 运算 数值的扩展(ES6) ...

  4. 【Springboot】用Springboot Admin监控你的微服务应用

    1 简介 目前,微服务大行其道,各大小公司争相学习模仿,把单体应用拆得七零八落.服务多了,运行的实例多了,给运维人员的压力就更大了.如果有十几个应用,单单做Health Check就已经够费时间的了. ...

  5. 学习Python编程技术的流程与步骤，自学与参加培训学习都适用

     一.清楚学习目标 无论是学习什么知识,都要有一个对学习目标的清楚认识.只有这样才能朝着目标持续前进,少走弯路,从学习中得到不断的提升,享受python学习计划的过程. 虽然目前的编程语言有很多,但是 ...

  6. 4.Redux学习4----react-redux

    react-redux是配合redux一起使用的,其中核心组件是Provider Provider是store的提供器,用Provider则store就无需直接引入组件内,而且还可以将一个store公 ...

  7. 【杭研大咖说】温正湖：6年，从不会写SQL到数据库专家

    他是业界主流数据库技术会议的明星讲师,开源社区各种分享活动的活跃分子:他累计申请了10多个技术发明专利,已授权8个:他近一年发布60多篇高质量技术博客文章,阅读量数十万:他和团队对MyRocks的优化 ...

  8. dubbo 获取不到本地地址，返回 127.0.0.1

    2019-08-14 12:29:09.609  WARN 1079 --- [           main] org.apache.dubbo.config.AbstractConfig   :  ...

  9. 移动端H5页面开发，碰到一个字体变大的BUG

    移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...

  10. ELK：ElasticSearch中有数据,Kibana查询不到数据

    ElasticSearch中有数据,Kibana查询不到数据 多数原因就是Linux的时区问题, 在linux输入date查看当前时间是否根本地相对应,不对应那么你就来对了, 解决方案一. 这个选择的 ...