前言:

    所有实例均来自《CSS揭秘》,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知

   该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度较慢。下面示例代码是我自己写的,若有错误,欢迎指正

   注:我会在最开头附上每个相关示例所需CSS属性链接作为补充,以供查阅和学习

     我会在每个示例最后附上书中提供的在线示例代码链接;

     我会从书中选择一些css技巧来分享,有兴趣的小伙伴可以去看看这本书,你不会失望的

  CSS需知:

    box-shadow

outline

  场景:

    如果让你实现下图多重边框的效果,你会怎么做呢?

    

    可能聪明的你首先想到利用 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揭秘—多重边框(二)的更多相关文章

  1. CSS实现多重边框和内凹圆角

    CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

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

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

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

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

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

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

  5. CSS揭秘—透明边框(一)

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

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

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

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

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

  8. CSS揭秘(二)背景与边框

    Chapter2 背景与边框 1. 半透明边框 基础:了解 RGBA & HSLA 颜色(色调 0~360.饱和度.亮度 (0%黑色~100%白色).透明度) 默认情况下,背景在边框的下层,容 ...

  9. css多重边框

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

随机推荐

  1. 14. Redis配置统计字典

    14. Redis配置统计字典14.1 info系统状态说明14.1.1 命令说明14.1.2 详细说明14.2 standalone配置说明和分析14.2.1 总体配置14.2.2 最大内存及策略1 ...

  2. python实现随机森林、逻辑回归和朴素贝叶斯的新闻文本分类

    实现本文的文本数据可以在THUCTC下载也可以自己手动爬虫生成, 本文主要参考:https://blog.csdn.net/hao5335156/article/details/82716923 nb ...

  3. Servlet之过滤器(Filter)

    一.概述 Servlet 过滤器是小型的 Web 组件,它们拦截请求和响应,以便查看.提取或以某种方式操作正在客户机和服务器之间交换的数据.这些组件通过一个配置文件来声明,并动态地处理,当在web.x ...

  4. openstack 王者归来学习笔记

    rpc.call方法执行的流程:(下次看代码的时候可以根据这流程来看,注意:由于rpc服务器和客户端具有很松的耦合性,因此以上步骤并不是绝对的.) 1.rpc服务器定义和启动rpc服务 2.rpc服务 ...

  5. common skill

    lunix watch and kill progress 1.  ps -ef 2. kill -9 pid

  6. springboot Ehcache使用

    .Ehcache简单说明及使用 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. Ehcache是一种广泛使用的开源Ja ...

  7. 当Vue中img的src是动态渲染时不显示问题

    最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如 ...

  8. mysql sql mode

    /usr/local/mysql/bin/mysqld --verbose --help | grep -A 1 'Default options' (1)关于配置文件路径 有时候,我发现虽然尝试修改 ...

  9. 循环调用dll库的界面时,首次正常,再次无响应

    消息循环错误: 在为使用CPaintManagerUI::MessageLoop()的情况下退出,但却发送了PostQuitMessage(0).

  10. Python基础环境搭建

    一.编程语言 1.解释型语言:每执行一次程序就要将代码翻译一次,如Java.JavaScript.VBScript.Perl.Python.Ruby.MATLAB 等都是解释型语言 2.编译型语言:程 ...