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绘制多重边框：

box-shadow

.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;

}

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

给div1加上：

border-radius:30px;

变成了这样：

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

outline

.div1{

width:100px;

height:100px;

margin:50px auto;

border:5px solid #000;

outline:10px solid #0f0;

}

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

-Moz-outline-radius:30px;

给div1加上属性：

border-radius:30px;

变成了这样：

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

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

[css 揭秘]：CSS揭秘 技巧(二)：多重边框

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

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

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

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

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

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

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

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

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

CSS 奇技淫巧十八招

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

css多重边框

一.使用box-shadow实现多重边框 html

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

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

随机推荐

eclipse4.x 启动之后， "Initializing Java Tooling" 卡住问题解决

eclipse4.x 启动之后, "Initializing Java Tooling(1%)",其他操作均被阻塞,导致无法正常工作, 解决方案: 删除当前工作目录下的worksp ...

二 J2EE 概述

一 WEB 应用 1. WEB 应用工作方式:B/S 模式 (浏览器/服务器模式) 2. WEB 应用结构组成: a. WEB 服务器:是安装在 WEB 服务器计算机上的一个软件包,负责接收用户请求并 ...

第六章 Qt布局管理器Layout

第六章 Qt布局管理器Layout 大家有没有发现一个现象,我们放置一个组件,给组件最原始的定位是给出这个控件的坐标和宽高值,这样Qt就知道这个组件的位置.当用户改变窗口的大小,组件还静静地呆在原来的 ...

BULK INSERT将CSV或TXT文件导入到SQL Server

CSV代表逗号分隔值,有时也被称为逗号分隔的值.而 如果加载txt文件,然后文件应该有逗号分隔的值.和文件应该是这样 下面是该脚本以创建表: CREATE TABLE Employee( Id int ...

tcl/tk实例详解——修改目录下所有文件(使用一个字符串代替另外一个)

#假设目录下全部都是普通文件,如果目录下还有子目录请#参考文章"读取文件夹下所有文件返回路径",#http://blog.csdn.net/dulixin/archive/2008 ...

oralce中exists not exists in not in对于NULL的处理

1.   先讨论 in 与 not in中存在NULL的情况, sql语句如下: 1 select 1 result1 from dual where 1 not in (2, 3); 2 3 4 s ...

css网页自适应-1

一."自适应网页设计"的概念 2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动 ...

函数(swift)

输入输出参数(In-Out Parameters) 如果你想要一个函数可以修改参数的值,并且想要在这些修改在函数调用结束后仍然存在,那么就应该把这个参数定义为输入输出参数(In-Out Paramet ...

怎样在一个HTML中嵌入另一个HTML页面(iframe标签用法)

iframe 怎么 在一个网页中嵌入另一个网页呢,我们可以用html中的iframe标签搞定. iframe支持所有浏览器.下面来看语法: