【基础】CSS实现多重边框的5种方式
简言
目前最优雅地实现多重边框的方案是利用CSS3
的 box-shadow
属性,但如果要兼容老的浏览器,则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求等情况,选择最适合的实现方案。
1 利用描边(outline
)属性
方案1利用描边(outline
)属性结合border
属性实现双重边框。此方案实现简单,兼容性好,能兼容除IE6,7
以外的浏览器。
1.1 核心代码
.borders {border: solid 6px #fff;outline: solid 6px #888;
}
1.2 演示程序
演示程序
1.3 说明
- 只能实现双重边框
- 边框样式灵活,可以实现虚线等样式的边框
- 描边在盒模型之外,会与外部元素发生重叠
2 利用额外的DIV
方案2利用额外的DIV嵌套的方式实现多重边框。这也是唯一不存在兼容性问题的方案。
2.1 核心代码
.outer {border: solid 6px #888;background: #fff;
}
.inner {background: #222;margin: 6px;
}
2.2 演示程序
演示程序
2.3 说明
- 兼容性好
- 可以实现多重边框,虚线边框等样式
- 需要额外的DIV元素,增加了代码复杂性
3 利用伪元素
方案3利用伪元素(:before
)的方式实现双重边框。实现代码略复杂,属于hack的实现方式,不推荐。
3.1 核心代码
.borders {border: solid 6px #fff;position: relative;
}
.borders:before {content: "";position: absolute;top: -12px;left: -12px;right: -12px;bottom: -12px;border: solid 6px #888;
}
3.2 演示程序
演示程序
3.3 说明
IE6,7,8
不兼容- 用
:after
也可以 - 同时应用
:before
和:after
可以实现三重边框
4 利用border-image
属性
方案4利用CSS3
的border-image
属性实现多重边框。实现方法简单,但需要制做一个额外的边框图片,兼容性较差。
4.1 核心代码
.borders {border: solid 12px transparent;border-image: url('borders.jpg') 12 12 12 12 repeat;
}
4.2 演示程序
演示程序
4.3 说明
本例中,利用border-image-slice
将边框图片分成如下图所示的9个区域:
其中包括四个角(1,2,3,4),四条边(5,6,7,8)以及中间区域(9)。
repeat
表示四条边都在相应的边框上重复的平铺。
5 利用box-shadow
属性
方案5利用box-shadow
属性实现多重边框。方案5是最简单,最直接的实现多重边框的方式。只有一行代码就可以实现多重边框效果。利用了阴影(box-shadow
)实现边框多少有一些hack的味道。
5.1 核心代码
.borders {box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
}
5.2 演示程序
演示程序
5.3 说明
为了用阴影模拟边框,本例中使用了两个阴影效果,设置偏移值和模糊值为0
,并适当地设置阴影的尺寸,从而实现了双重边框的效果。因为一个阴影重叠在另一个阴影之上,第二个阴影的尺寸要设置成第一个阴影尺寸的两倍。关键部分是将模糊值设成0,从而产生像边框一样的纯色阴影,看起来和边框一样。
和描边(outline
)属性一样,box-shadow
属性可能会和周边元素发生重叠,因此要适当地设置元素的外边距。box-shadow
兼容性一般。
6 参考
MDN border-image
MDN box-shadow
Multiple Borders with CSS
CSS-tricks Multiple Borders
7 结语
本文简述了5种多重边框的实现方式,各有优缺点,大家要根据实际情况进行取舍。
文中所述部分文字及代码汇编于网络。因时间不足,能力有限等原因,存在文字阐述不准及代码测试不足等诸多问题。
【基础】CSS实现多重边框的5种方式相关推荐
- html多重边框,中间空白,【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式 简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
- html正方形边框,详解HTML设置边框的三种方式
HTML设置边框的三种方式 border-width: 1px 2px 2px; border-style: solid dashed dotted; border-color:red green b ...
- CSS样式表引入的三种方式,及优先级顺序
CSS样式表引入的三种方式,及优先级顺序 CSS可以通过三种方式引入样式表,三种方式分别是行内样式表,内部样式表和外部样式表. 行内样式表 通过给标签设定style属性 <body>< ...
- css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式 一.使用grid布局 二.使用flex布局 三.使用定位+外边距 四.使用定位+平移 五.使用外边距 + 平移 六.使用文本对齐 + 行高 七.使用表格单元 一.使用 ...
- HTML设置边框的三种方式
HTML设置边框的三种方式 文章目录 HTML设置边框的三种方式 1.边框的组成: 2.复合样式 3.单一设置 这样代表上边框 右边框 下边框 左边框 分别对四条边框进行设置 两个值代表:上下边框 左 ...
- 如何将横向滚动条加粗css,css实现横向滚动条的两种方式(代码实例)
本章给大家介绍用css实现横向滚动条的两种方式.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. html代码: 全部 Adobe 微软 会计 绘画 Adobe 微软 会计 绘画 一. ...
- CSS元素上下左右居中的几种方式
CSS元素上下左右居中的几种方式 假设以以下父子元素实现上下左右居中为例: <div class='father'><div class='son'></div> ...
- CSS实现表格细边框的三种方式
说到表格,虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代.可是当遇到报表之类的操作是table还是非常值得使用的. 由于操作表格的时候不可避免使用到细边框效果,所以我就整理了一 ...
- CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解 写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
最新文章
- np.ravel()和np.flatten() 区别
- Windows Phone 7 IEnumerableT.Select和SelectMany的区别
- python未将对象引用设置到对象的实例_未将对象引用设置到对象的实例(SystemNullReferenceException)...
- Java微信公众平台开发(二)--微信服务器post消息体的接收
- Maven项目整合提示:Maven Missing artifact xxx:jar 错误解决方案
- Windows平台下Go语言的安装和环境变量设置
- android权限--android开发中的权限及含义(下)
- Android使用SurfaceView实现墨迹天气的风车效果
- JavaScript设计模式与开发实践 - 单例模式
- VS2005进行WORD文档开发
- MongoDB 在windows shell环境下的基本操作和命令的使用示例(四)
- 关于管理者应该拥有的的六十…
- Exchange2010安装指南
- Unity Shader (二)
- 中国传统文化的现代意义
- 以下哪些不是Linux操作系统特点,[多选] Linux操作系统具有以下()特点。
- html5 树开花效果,院子里别养花了,种上这5种“开花树”,比盆栽漂亮多1倍
- 平面设计构图是什么,平面设计基本构图原则和形式是什么:夏雨老师
- keras导入weights
- python -简易密码生成器