前言:

    所有实例均来自《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. strcat的用法

    原型: char *strcat(char *str1,char *str2); strcat的实现: char* MyStrcat(char *dst, const char*src) { if ( ...

  2. srs之深入浅出看流媒体

    本文转载:https://blog.csdn.net/zjqlovell/article/details/50786040 CDN这几年爆炸式增长,带宽提速是根源,而HTTP始终还是那个屌样,因此目前 ...

  3. Linux服务器上监控网络带宽的18个常用命令 zz

    Linux服务器上监控网络带宽的18个常用命令 本文介绍了一些可以用来监控网络使用情况的Linux命令行工具.这些工具可以监控通过网络接口传输的数据,并测量目前哪些数据所传输的速度.入站流量和出站流量 ...

  4. ASCII,Unicode 和 UTF-8

    ASCII: 英文的编码方式,规定了128个字符的编码,使用了一个字节的后七位表示. Unicode : 每个国家的字符集都不同,世界上所有的字符远远超过128个.Unicode,就是一种所有符号的编 ...

  5. js调用后台方法

    一种方法是使用ajax调用$.ajax({type: "POST",//传输方式url: "",//action路径data: "",//传 ...

  6. beamer插入图片的一些技巧

    1. 点一下,让另一张隐藏的图出现

  7. shell脚本编写某一文件夹内拷贝某一段文件(有则跳过没有则拷贝)

    必须是同一台服务器下,或者挂载目录,不同服务器下没办法查询目录中是否有该文件 如果不在同一服务器下,可以把要查询的那个服务器的文件夹设置共享挂在到当前服务器 或者可以把脚本写到要拷贝的服务器上,那么s ...

  8. MySQL系统变量 sql_mode 详解

    转载自:http://tech.it168.com/a2012/0822/1388/000001388401_all.shtml MySQL数据类型:SQL_MODE设置不容忽视 SQL_MODE可能 ...

  9. 自学Python第一天

    大学毕业后在一家第三方小程序公司做客服,心有不甘,看着同学们有做安防售前的,有在政府.企业里面做网络工程师的.更有甚者天天搭建个云计算啥的都是家常便饭,再想想自己,堂堂网络工程专业,却做了客服,还是没 ...

  10. outlook VSTO

    https://files.cnblogs.com/files/maooveyu/OutlookPhotoSync.rar