昨天被问到一个很有意思的问题，单个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. SQL中Group By和having的用法

    转自 ITGirl笑笑   一.GROUP BY GROUP BY语句用来与聚合函数(aggregate functions such as COUNT, SUM, AVG, MIN, or MAX. ...

  2. 【ES6】数组的扩展——扩展运算符

    1.扩展运算符[三个点(...)将一个数组转为用逗号分隔的参数序列] 作用:用于函数调用 function add(x, y) { return x + y; } const numbers = [2 ...

  3. JUC-7-lock接口

    解决多线程安全的方式   synchronized     隐式锁    1.同步代码块  2.同步方法   3.lock  同步锁    显式锁         lock()方法上锁    unlo ...

  4. Scrcpy用电脑控制Android手机(支持Windows/macOS/Linux)

    一.scrcpy简介 注意:拼写是scrcpy,非Python爬虫框架Scrapy. scrcpy可以通过adb调试的方式来将手机屏幕投到电脑上,并可以通过电脑控制您的Android设备.它可以通过U ...

  5. Autofac 泛型依赖注入

    using Autofac;using Autofac.Extensions.DependencyInjection;using Hangfire;using Microsoft.AspNetCore ...

  6. linux服务器JDK1.8环境变量配置

    1. 场景描述 软件老王年龄大了,新机器(Linxu)下,配置JDK环境变量老记不住,记录下,有需要的朋友参考下. 2. 解决方案 2.1 上传tar包 ftp上传tar包: jdk-8u181-li ...

  7. ruby读写文件的方法

    读文件 #Ruby 读取文件 #方法一 file = File.open("/Users/Desktop/demo.txt","r") while line = ...

  8. 设计模式（含UML、设计原则、各种模式讲解链接）

    一.统一建模语言UML UML是一种开放的方法,用于说明.可视化.构建和编写一个正在开发的.面向对象的.软件密集系统的制品的开放方法 UML展现了一系列最佳工程实践,这些最佳实践在对大规模,复杂系统进 ...

  9. 简单了解一下：var 、let、const

    var 重新赋值,重新定义,作用域 属于:function scope: let 声明的变量只在 let 命令所在的代码块内有效,Block scope. const 声明一个只读的常量,一旦声明,常 ...

  10. create connection SQLException, url: jdbc:mysql://localhost:3306/demo, errorCode 1045, state 28000

    错误原因: 配置文件中 username 与 Mysql 关键字冲突 改为: