昨天被问到一个很有意思的问题，单个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. IDEA 支持scala开发

    IDEA支持scala开发,需要安装scala插件,并且pom.xml也需要添加对应依赖. 1. 安装scala插件 下载地址:https://plugins.jetbrains.com/plugin ...

  2. linux目录的读(r)、写(w)、执行(x)权限说明

    linux目录的读.写.执行权限说明 1.可读r #表示具有浏览目录下面文件及子目录的权限.即ls dir 1)如果没有x权限,不能进到目录里,即无法 cd dir 2)如果没有x权限,ls列表可以看 ...

  3. GHOST CMS - Package.json

    Package.json The package.json file is a set of meta data about a theme. package.json 文件是一组关于主题的元数据. ...

  4. Elasticsearch 监控指标解析

    1.集群监控 集群监控主要包括两个方面的内容,分别是集群健康情况和集群的运行状态. 集群健康状态可以通过以下api获取: http://ip:9200/_cluster/health?pretty 关 ...

  5. Nginx-HTTP Strict Transport Security(HSTS)

    HTTP Strict Transport Security(HSTS) HTTP Strict Transport Security(通常简称为HSTS)是一个安全功能,它告诉浏览器只能通过HTTP ...

  6. 微信小程序—支付宝小程序与微信小程序的不同点对比

    支付宝小程序语法 http://caibaojian.com/aliapp-wxapp.html https://www.cnblogs.com/bgwhite/p/9447639.html http ...

  7. java.sql.SQLException: Unknown initial character set index '255' received from server. Initial client character set can be forced via the 'characterEncoding' property.解决方案

    解决方案: 首先查看数据库的版本号,删除旧的jar包,将mysql-connector-java.jar更换成对应版本号 同时在连接数据库的url后加上?useUnicode=true&cha ...

  8. Linux查看哪些进程占用的系统 buffer/cache 较高 (hcache，lsof）命令

    原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/9652651a-7 ...

  9. 流式计算（二）-Kafka Stream

    前面说了Java8的流,这里还说流处理,既然是流,比如水流车流,肯定得有流的源头,源可以有多种,可以自建,也可以从应用端获取,今天就拿非常经典的Kafka做源头来说事,比如要来一套应用日志实时分析框架 ...

  10. 《Dotnet9》系列之建站-Dotnet9建站20天感悟

    本人站点 https://dotnet9.com,建站20天了,在这给站长朋友讲述个人建站经历,希望对大家能有所帮助. https://dotnet9.com 网站采用 宝塔 + WordPress ...