前言：

　　　　所有实例均来自《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. leetcode7：反转整数

    给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注意: 假 ...

  2. 记一次mac下使用mamp集成环境配置lumen项目自定义域名遇到的花样问题

    1.安装好mamp集成环境,自行百度. 2.从公司项目版本库里将项目克隆到本地. 好了,开始配置自定义域名来访问项目,以下是遇到的问题集锦... 1.web服务器使用的nginx,配置完域名访问报40 ...

  3. 选择文件，显示其路径在ListBox控件里

    private void btnSelect_Click(object sender, EventArgs e)        {            lbxFiles.Items.Clear(); ...

  4. idea实现热部署并且开启自动编译

    [注]本文转自https://blog.csdn.net/z15732621582/article/details/79439359博文,如有冒犯,请联系博主: 问题描述: 最近在调试代码并进行本地测 ...

  5. DTO的问题

    首先使用写好的excle将表中的列进行复制,然后生成代码. 实现一个类继承FormCommonDTO.注意父类有的属性子类一定不能写,否则转换时会报错. 字段名字不一样,意义一样的,不能删除

  6. VSCode 绿色版(zip压缩包) 添加右键菜单 使用VSCode 打开文件或文件夹

    微软官方下载VSCode 可以下载exe安装外还可以下载zip 压缩包 下载地址: https://code.visualstudio.com/Download 但是zip压缩包却没有了 右键使用VS ...

  7. MVC Razor视图下ViewData传递html内容被转义

    页面输出: html源码: <div style="width: 90%; height: auto;"> <p>付凯航 阿豆 ADOU</p> ...

  8. BSOJ3760||洛谷P1453 城市环路 题解

    城市环路 Description 一座城市,往往会被人们划分为几个区域,例如住宅区.商业区.工业区等等.B市就被分为了以下的两个区域——城市中心和城市郊区.在着这两个区域的中间是一条围绕B市的环路,环 ...

  9. freeMark模板引擎

    http://blog.csdn.net/shimiso/article/details/8778793

  10. 人力资源项目中 add_account.php

    add_account.php ( 文件浏览 ) <?phpinclude('db_con.php');   if(isset($_POST['save'])) {    $employee_i ...