昨天被问到一个很有意思的问题，单个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. node-sass下载失败

    在angular项目中下载依赖npm install时提示node-sass安装失败,解决方法如下: 1.下载win32-x64-57_binding.node文件至指定目录 2.添加环境变量: 变量 ...

  2. django----cookie与session 和 中间件

    目录 cookie与session简介及操作 cookie django中操作cookie cookie超时时间 删除cookie session session操作 设置 key value发生了什 ...

  3. 《Java基础知识》Java访问修饰符（访问控制符）

    Java 通过修饰符来控制类.属性和方法的访问权限和其他功能,通常放在语句的最前端.例如: public class className { // body of class } private bo ...

  4. 《Java基础知识》Java多态对象的类型转换

    这里所说的对象类型转换,是指存在继承关系的对象,不是任意类型的对象.当对不存在继承关系的对象进行强制类型转换时,java 运行时将抛出 java.lang.ClassCastException 异常. ...

  5. 2019最新EI源刊目录

    2D Materials Journal3D Printing and Additive Manufacturing Journal3D Research Journal3DTV-Conference ...

  6. CVPR 2019轨迹预测竞赛冠军方法总结

    背景 CVPR 2019 是机器视觉方向最重要的学术会议,本届大会共吸引了来自全世界各地共计 5160 篇论文,共接收 1294 篇论文,投稿数量和接受数量都创下了历史新高,其中与自动驾驶相关的论文. ...

  7. 微信小程序APP生命周期

    小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始 ...

  8. JS---案例：完整的轮播图---重点！

    案例:完整的轮播图 思路: 分5部分做 1. 获取所有要用的元素 2. 做小按钮,点击移动图标部分 3. 做右边焦点按钮,点击移动图片,小按钮颜色一起跟着变 (克隆了第一图到第六图,用索引liObj. ...

  9. JS---DOM---为元素解绑事件

    解绑事件 注意:用什么方式绑定事件, 就应该用对应的方式解绑事件 1.解绑事件 对象.on事件名字=事件处理函数--->绑定事件 对象.on事件名字=null;   //1 对象.on事件名字= ...

  10. oop面向对象【继承、super、this、抽象类】

    今日内容 1.三大特性——继承 2.方法重写 3.super关键字 4.this关键字 5.抽象类 教学目标 1.能够解释类名作为参数和返回值类型 2.能够写出类的继承格式 3.能够说出继承的特点 4 ...