css语法：

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值 描述 测试
h-shadow 必需。水平阴影的位置。允许负值。 测试
v-shadow 必需。垂直阴影的位置。允许负值。 测试
blur 可选。模糊距离。 测试
spread 可选。阴影的尺寸。 测试
color 可选。阴影的颜色。请参阅 CSS 颜色值。 测试
inset 可选。将外部阴影 (outset) 改为内部阴影。 测试

js语法：

object.style.boxShadow="10px 10px 5px #888888"

浏览器支持：

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

实例：

利用box-shadow绘制多重边框：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>box-shadow</title>

    <style type="text/css">

        .div1{

            width: 100px;

            height: 100px;

            box-shadow:0 0 0 5px #000 inset,0 0 0 10px #f0f inset,0 0 0 20px #ff0 inset;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

</body>

</html>

效果：http://sandbox.runjs.cn/show/rzwsnqrz

设置inset主要是为了两个div之前的间隔，避免边框（阴影）被挡住。并且所有的边框（阴影）都有圆角：

给div1加上：

border-radius:30px;

变成了这样：

效果：http://sandbox.runjs.cn/show/dlbe8rod

还有一种绘制两重边框的效果（利用outline）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>outline</title>

    <style type="text/css">

        .div1{

            width:100px;

            height:100px;

            margin:50px auto;

            border:5px solid #000;

            outline:10px solid #0f0;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

</body>

</html>

效果：http://sandbox.runjs.cn/show/wfw5jdu5

这种方法只能绘制出两重边框，并且有个缺点：outline不能圆角！！,仅火狐支持：

-Moz-outline-radius:30px;

给div1加上属性：

border-radius:30px;

变成了这样：

效果：http://sandbox.runjs.cn/show/httheoha

css奇技淫巧—box-shadow与outline绘制多重边框效果的更多相关文章

  1. css border 三角形阴影(不规则图形阴影) & 多重边框的制作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border- ...

  2. [css 揭秘]：CSS揭秘 技巧（二）：多重边框

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

  3. [css]《css揭秘》学习（二）-多重边框

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

  4. CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果

    本文将介绍一个小技巧,通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果. 起因 一日,一群友私聊问我.如何使用 CSS 实现下述效果,一个文字的波浪效果: 我当时想都没想,就回 ...

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

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

  6. CSS如何实现圆角的outline效果？

    一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价 ...

  7. border三角形阴影(不规则图形阴影)和多重边框的制作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. border的组合写法 border:border-width border-style borde ...

  8. CSS 奇技淫巧十八招

    http://www.tuicool.com/articles/VZneI3   開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從 ...

  9. css多重边框

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

随机推荐

  1. python suds 调用webservice 缓存

    在linux系统中 如果webservice更新了字段 suds调用有可能缓存以前的字段或方法,对新的字段报找不到类型 TypeNotFound,或者对 新加的方法找不到该方法的错误. 当更新或添加w ...

  2. 幻想乡三连C：狂飙突进的幻想乡

    题解: 不难发现,对于每一条从$S$到$T$的路径,设其$x.y$的和为$S_x.S_y$,其对答案的贡献是$a\cdot S_x+(1-a)\cdot S_y$,这是一个关于$a$的一次函数.而所有 ...

  3. ngCookies都做了什么

    根据官方的api文档,ngCookies的$cookieStore服务,提供了这样几个方法: 1.get(key); 2.put(key, value); 3.remove(key); 以上方法都是对 ...

  4. 【C/C++】scanf，printf 函数

    摘自http://www.cplusplus.com 1. scanf 函数 int scanf ( const char * format, ... ); Parameters format C s ...

  5. 记一次肉机事件--yam

    背景: 研发同事反应他自己的测试机器,有一个yum程序占用cpu很多,接近100%,然后他就将这个程序kill了.我一看他给我发的截图,原来不是“yum”,而是“yam”,第一反应就是让人当肉机了.上 ...

  6. netty中的引导Bootstrap客户端

    一.Bootstrap Bootstrap 是 Netty 提供的一个便利的工厂类, 我们可以通过它来完成 Netty 的客户端或服务器端的 Netty 初始化.下面我以 Netty 源码例子中的 E ...

  7. 使用TRY CATCH进行SQL Server异常处理

    TRY...CATCH是Sql Server 2005/2008令人印象深刻的新特性.提高了开发人员异常处理能力.没有理由不尝试一下Try.. Catch功能. *      TRY 块 - 包含可能 ...

  8. mybatis 学习一 总体概述

    mybatis使用起来不复杂,大体上来说,就是将db连接信息,所有的sql语句信息,都放到配置文件里面,然后去读配置信息,根据db信息,创建好session工厂,然后拿到sqlsession回话之后, ...

  9. Jquery隐藏相同name的div

    $("div:[name=divName]").hide(); divName(自己div的Name)

  10. 大数据处理之道（十分钟学会Python）

    一:python 简介 (1)Python的由来 Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个 ...