1、box-shadow还接受第四个参数(称作“扩张半径”), 通过指定正值或负值, 可以让投影面积加大或者减小
2、如果我们想要一道实线边框其实也是可以通过box-shadow来模拟,原理就是一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值
eg:

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

3、border其实也能实现上述实线效果而且似乎挺简单,但是box-shadow却是有border无法媲美的功能,它支持逗号分隔语法, 我们可以创建任意数量的投影
eg:

box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

4、需要注意的是box-shadow 是层层叠加的,也就是说如果你想让第二层边框宽度为5的话则必须在第一层边框宽度10的基础上增加5,也就是最终值为15

div {
width: 100px;
height: 60px;
margin: 25px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0, 0, 0, .6);
}

具体效果可见链接
5、投影效果跟边框的效果完全不一致,

a)投影它不会影响布局, 而且也不会受到 box-sizing 属性的影响
b)边框会响应鼠标点击事件,投影出来的边框虽然看上去占据空间大了很多,但是点击区域范围没有变大(无法响应点击事件可通过因为它不会影响布局, 而且也不会受到 box-sizing 属性的影响)

6、如果我们要模拟虚线边框的话,box-shadow 就没辙了,虽然outline并不支持逗号分隔,但是可实现虚拟边框,还可以通过 outline-offset 属性来控制它跟元素边缘之间的间距, 这个属性甚至可以接受负值
需要注意的是:边框不一定会贴合 border-radius 属性产生的圆角, 因此如果元素
是圆角的, 它的描边可能还是直角的

        div {
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
outline-offset: 5px;
}

CSS揭秘之《多重边框》的更多相关文章

  1. CSS揭秘之多重边框&连续的图像边框

    1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...

  2. [读书笔记] CSS揭秘-背景与边框

    半透明边框 默认情况下,背景会延伸到边框所在的区域下层.可以通过background-clip属性调整该默认行为. border: 10px solid rgba(0,0,0,.2) backgrou ...

  3. [css 揭秘]:CSS揭秘 技巧(二):多重边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...

  4. CSS揭秘—多重边框(二)

    前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...

  5. [css]《css揭秘》学习(二)-多重边框

    一.box-shadow属性 box-shadow除了生成投影,还可以用来生成边框:它接受第4个值作为扩张半径,0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径,得到的显示效果和边框是一样的:但是 ...

  6. CSS揭秘-半透明边框与多重边框

    场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为   解决方案: 使用backgroun ...

  7. css多重边框

    一.使用box-shadow实现多重边框 html <div class="multiple"></div> css .multiple{ backgrou ...

  8. [css 揭秘]:CSS揭秘 技巧(四):边框内圆角

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...

  9. [css 揭秘]:CSS揭秘 技巧(一):半透明边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...

  10. 【基础】CSS实现多重边框的5种方式

    简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求 ...

随机推荐

  1. Matplotlib:Python三维绘图

    1.创建三维坐标轴对象Axes3D 创建Axes3D主要有两种方式,一种是利用关键字projection='3d'来实现,另一种是通过从mpl_toolkits.mplot3d导入对象Axes3D来实 ...

  2. WPF优秀组件推荐之Stylet(一)

    一.简介 Stylet是基于WPF的一款MVVM组件,虽然WPF本身是自带MVVM功能的,但实现起来不是很方便 ,通过Stylet,用户可以用很少的代码就能享受MVVM带来的舒适体验. 目前Style ...

  3. HTML的怎么使用,开发工具以及常用标签。

    前端学习:学习地址:黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动,下面这些都是一些学习笔记.临渊羡鱼,不如退而结网!!愿我自己学有所成,也愿每个前端爱好者学有所成 ...

  4. 图解机器学习 | LightGBM模型详解

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/34 本文地址:http://www.showmeai.tech/article-det ...

  5. 基于 vite2 + Vue3 写一个在线帮助文档工具

    提起帮助文档,想必大家都会想到 VuePress等,我也体验了一下,但是感觉和我的思路不太一样,我希望的是那种可以直接在线编辑文档,然后无需编译就可以直接发布的方式,另外可以在线写(修改)代码并且运行 ...

  6. IDEA在同一工作空间导入多个项目

    在IDEA中导入项目的基本操作是: File--Open--打开工作空间选择要导入的项目 一个项目导入到工作空间啦 但是当你重复这个操作想在这个工作空间继续导入其他模块的时候,就会出现以下问题 不不管 ...

  7. Docker 学习之命令篇

      Docker 学习之命令篇 1. docker images //镜像列表 2. docker ps –a //所有运行过的容器 3. docker ps –l 最后运行的容器 4. docker ...

  8. Net中事件的用法之二

    1.委托与事件的区别 事件对权限做了控制 1.委托可以直接调用 事件不可以直接调用 2.委托允许外面直接赋值 事件不允许外面直接赋值 2.事件与委托的实例比较 using System; using ...

  9. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  10. 在Ubuntu 内安装spin

    相关课程:协议分析与设计 虽然一些镜像仓库内提供了spin,并且可以直接使用apt 或者yum 安装,但其版本总不是最新的,而且无法使用ispin 图形界面.因此本文介绍了手动下载编译spin 的步骤 ...