CSS揭秘—多重边框（二）
前言：
所有实例均来自《CSS揭秘》，该书以平时遇到的疑难杂症为引，提供解决方法，只能说秒极了，再一次刷新了我对CSS的认知
该书只提供了关键CSS代码，虽然有在线示例代码链接，但访问速度较慢。下面示例代码是我自己写的，若有错误，欢迎指正
注：我会在最开头附上每个相关示例所需CSS属性链接作为补充，以供查阅和学习
我会在每个示例最后附上书中提供的在线示例代码链接；
我会从书中选择一些css技巧来分享，有兴趣的小伙伴可以去看看这本书，你不会失望的
CSS需知：
场景：
如果让你实现下图多重边框的效果，你会怎么做呢？
可能聪明的你首先想到利用 outline 属性来实现，如下代码
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: yellowgreen;
border: 10px solid #655;
outline: 10px solid deeppink;
}
如果你还想加上阴影效果，使用box-shadow 属性即可，
box-shadow: 10px 10px 5px 10px rgb(0,0,0,.5);
问题：
现在有个问题，如果多重边框像上面一样只有2重，那使用 outline 属性是没有问题的。
但如果是3重，4重，甚至更多重边框的情况就行不通了，如下图，3重边框
解决方法：
上面问题只需用 box-shadow 属性，即可迎刃而解。
box-shadow支持逗号分隔，比如像下面这样，想加几个边框就加几个，用逗号分隔开就行
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink, 0 0 0 30px brown;
注：这里要注意 box-shadow的第四个属性，表示阴影的大小（就是上面代码的10px，20px，30px）
如果你想要添加多条边框，就需要把阴影大小的值依次递增，否则无效
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink,0 0 0 30px brown, 10px 10px 5px 30px rgb(0, 0, 0, .5);
注：如果你还要添加阴影效果，也需要把阴影大小的值进行调整，只能 >= 你设置的最后一条边框的阴影大小值
比如上面代码中的3条边框阴影大小值分别为，10px，20px，30px，那后面阴影的值只能设置30px，或比30px大
DEMO
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink,0 0 0 30px brown, 10px 10px 5px 30px rgb(0, 0, 0, .5);
}
</style>
</head> <body> <div></div>
</body> </html>
书中在线实例链接：http://dabblet.com/gist/012289cc14106a1bd7a5
CSS揭秘—多重边框（二）的更多相关文章
- CSS实现多重边框和内凹圆角
CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- [css 揭秘]：CSS揭秘 技巧（二）：多重边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...
- CSS揭秘-半透明边框与多重边框
场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为 解决方案: 使用backgroun ...
- 【基础】CSS实现多重边框的5种方式
简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求 ...
- CSS揭秘—透明边框（一）
前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...
- [css]《css揭秘》学习（二）-多重边框
一.box-shadow属性 box-shadow除了生成投影,还可以用来生成边框:它接受第4个值作为扩张半径,0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径,得到的显示效果和边框是一样的:但是 ...
- CSS揭秘之多重边框&连续的图像边框
1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...
- CSS揭秘（二）背景与边框
Chapter2 背景与边框 1. 半透明边框 基础:了解 RGBA & HSLA 颜色(色调 0~360.饱和度.亮度 (0%黑色~100%白色).透明度) 默认情况下,背景在边框的下层,容 ...
- css多重边框
一.使用box-shadow实现多重边框 html <div class="multiple"></div> css .multiple{ backgrou ...
随机推荐
- Java-HashMap、HashSet、hashTable
HashMap:key:可null,重复的key对应的value会出现后面覆盖前面的情况.value:可null; 引用:数组,数组中存链表. HashSet使用HashMap的实现存储数据,所以有H ...
- Python 列表(list)的使用
文章目录 一.创建list 二.访问list中元素 三.更新元素 四.删除元素 五.求list长度 六.连接列表 七.截取列表 八.复制列表 一.创建list myList = [2,3,1,5,6, ...
- Jenkins入门，介绍、安装
一.介绍 Jenkins: 三.安装 Jenkins: 第一种方式: 下载 windows 版本:进入 Jenkins 官网:https://jenkins.io/ 进入下 ...
- MySQL中的latch(闩锁)详解——易产生的问题以及原因分析
Latch 什么是latch: 锁是数据库系统区别与文件系统的一个关键特性.锁机制用于管理对共享资源的并发访问.Innodb存储引擎在行级别上对表数据上锁,这固然不错.但是Innodb也会在多个地方使 ...
- 使用sort对数组中的对象的某个属性进行排序
var data=[ { code: "10004", grade: "5.6", planQuantity: 220, }, { code: "10 ...
- 深入C#
深入C# String类 C#中的String类他是专门处理字符串的(String),他在System的命名空间下,在C#中我们使用的是string 小写的string只是大写的String的一个别 ...
- 京东Alpha平台开发笔记系列（二）
第一篇博文简单讲了一下京东Alpha平台与个人idea技能,本篇将讲解Alpha平台与个人开发需要的一些知识,下面开篇 ——>>> 上图就是京东Alpha技能平台的首页,Skill平 ...
- unic
在线考试 答题剩余时间0小时51分18秒 考生须知 1.本次考试结束后,剩余补考次数:2次 2.考试时间为60分钟,超时系统自动交卷 3.本次考试满分100分(5*20道),60分通过考试 1. (单 ...
- 汇总java生态圈常用技术框架、开源中间件，系统架构及经典案例等
转自:http://www.51testing.com/html/83/n-3718883.html 有人认为编程是一门技术活,要有一定的天赋,非天资聪慧者不能及也.非也,这是近几年,对于技术这碗饭有 ...
- Java的this关键字在继承时的作用
1.this.属性 class A{ int a = 10; public void play(){ System.out.println(this.a); } } class B extends A ...