shadowbox怎么注册不了了,Shadowboxer
如何使用shadow box做图片库
box-shadow和text-shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。
取值：
box-shadow属性至多有6个参数设置，他们分别取值：
阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小
阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
浏览器的兼容：
我们这里还涉及到一个各浏览器前缀的问题，比如说Mozilla内核的-moz，webkit内核的-webkit。经测试在最新版的Firefox和Google Chrome浏览器都无需加上前缀，但在safari中还是需要前缘的，为了能兼容支持的各大浏览器，我们在书写box-shadow的格式应该这样
//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
?0?2
box-shadow的特征：
较之ps制作出来的图片相比，CSS3的box-shadow可以通过改变其参数得到不同的效果，如：改变阴影偏移量的设置，我们可以使用阴影只在对象的上下左右的任一边出现，也可以让其出现在其中的某几个边上;其二可以随时调节阴影大小，边缘模糊度，阴影颜色，其三可以随时更改为内阴影，另外还可以设置多个阴影效果
我们先来看一个简单的实例：
.demo1 {
-webkit-box-shadow: 3px 3px 3px;
-moz-box-shadow: 3px 3px 3px;
box-shadow: 3px 3px 3px;
}
?0?2
Firefox/Opera下效果?0?2?0?2?0?2 Safari/Chrome下效果
回到上面那个实例，其实在webkit内核的浏览器Safari、Google Chrome里不会有任何阴影效果，虽然W3C标准里说颜色是可选择的，但是在没有给出颜色的时候 ，safari/chrome和firefox表现不同，在webkit内核的浏览器下阴影表现为透明色而mozilla和oprea下表现为黑色。基于这样的原因，大家在使用box-shadow时不要忘了加上阴影颜色的值。
根据上面的现像，我们来看一个box-shadow有关阴影是否会被计算为内容的实例。
div class="outer"
div class="inter"?0?2/div
/div
?0?2
我们把外面div设置为100px*100px,里面div设置为60px*60px，并在里面的div上加上一个向下向右偏移50px的绿色阴影，我们看看多出来的阴影会怎么样？
.outer {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.inter {
width: 60px;
height: 60px;
margin: 10px auto;
background: #f69;
-webkit-box-shadow: 50px 50px green;
-moz-box-shadow: 50px 50px green;
box-shadow: 50px 50px green;
}
从各大浏览中的效果我们可以看出，阴影多出来的阴影会撑破容器跑出来。标准里有一张图，描述了box-shadow的工作方式，这张图直观告诉我们如何使用box-shadow
这张图可以告诉我们很多信息，比如说borer-radius圆角，阴影扩展、阴影模糊以及padding是如何影响对象阴影的：非零值的border-radius将会以相同的作用影响阴影的外形，但border-image不会影响对象阴影的任何外形；对象阴影同box模型的层次一样，外阴影会在对象背景之下，内阴影会在边框之下背景之上。所以整个层级就是：边框内阴影背景图片背景颜色外阴影。因为大家都知道，我们的背景图片是在背景颜色之上的。
IE滤镜方法：
在前面我们讲过，IE9以下是不支持CSS3的box-shadow的，但为了处理这个兼容问题，我们可以在IE下使用IE的shadow阴影滤镜来实现
filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）);
?0?2
注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。除了使用滤镜的方法外，我们还有一种方法可以实现IE下的效果。那就是使用jQuery的插件jquery.boxshadow.js。那么具体如何使用呢？其实很简单，你先下载这个jquery.boxshadow.js插件到你的项目中，接着把jquery版本库和jquery.boxshadow.js加载到页面上，如
script type="text/javascript" src="../js/jquery.min.js"/script
script type="text/javascript" src="../js/jquery.boxshadow.js"/script
?0?2
然后你可以创建一个单独的js文件来处理，或者直接在页面的head/head里欠入一个script?0?2/script，我们这里就只例出一个直接在head插入的解决办法：
$(document).ready(function(){
if($.browser.msie) {
$('.demo1').boxShadow(0,0,5,"#888"); //demo1元素使用了box-shadow
$('.demo2').boxShadow(-10,-10,5,"#f36"); //demo2元素使用了box-shadow
}
});
?0?2
上面我们了解了CSS3的box-shadow相关基础知识，那么下面我们通过一些实例来巩固一下box-shadow的具体用法：
如果没有进行特殊说明，我们这里的实例所用的HTML代码都如下，只是改变第二个class名称，如demo1 demo2等：
div class="demo demo2/div
?0?2
基本的CSS样式
.demo {
width: 100px;
height: 50px;
background: #f69;
}
?0?2
提醒大家：为了节约时间，下面的css代码中我只写了一个box-shadow，但是大家在实际应用中一定要记得把:-webkit-box-shadow和-moz-box-shadow加上去，不然在safari和chrome浏览器下是会没有任何效果的，这个我们在前面提过，此处不详说。
效果一:单边效果
.dome2 {
box-shadow: -2px 0 0 green, //左边阴影
0 -2px 0 blue, //顶部阴影
0 2px 0 red, //底部阴影
2px 0 0 yellow; //右边阴影
}
?0?2
上例中，我们分别对对象的四个边进行了box-shadow的设置，只不过我们使用了多层次的box-shadow应用，如果只需要在对象某一边应用阴影时，我们可以删除不使用阴影的设置。给对象四边设计阴影，我们是通过改变x-offset和y-offset的正负值来实现，其中x-offset为负值时，生成左边阴影，为正值时生成右边阴影，y-offset为正值是生成底部阴影，为负值时生成顶部阴影。并且把模糊半径设置为0，如果不设置为0的话那么其他三边也将会有阴影，并且此处还涉及到一个多阴影的顺序问题。当给同一个元素使用多个阴影属性时，需要注意它的顺序，最先写的阴影将显示在最顶层，如我们将上面的实例变一下，给其加上模糊值，将更能看出效果：
.demo3 {
box-shadow: -2px 0 5px green,0 -2px 5px blue,0 2px 5px red,2px 0 5px yellow;
}
?0?2
这样我们上例中：左边的放在了第一，其green阴影色在顶边的blue上，而顶边的blue在又在右边的yellow上，右这的yellow却在底边的red上。所以应用多次阴影的写法一定要注意其顺序问题，特别的当阴影的模糊值不一样的情况之下，另外有些网站介绍说可以写成下面的形式，但我经过多个浏览器测试，这种写法是无效的，
.demo4 {
/*这种写法是错误的（，网上有介绍说可以这样书写，但我测试多次未见效果，所以本人提倡不要这样书次，以免造成不必要的错误）*/
box-shadow: -2px 0 0 green,box-shadow: 0 -2px 0 blue,box-shadow: 0 2px 0 red,box-shadow: 2px 0 0 yellow;
}
?0?2
从上图的效果中也再一次证明了上面的写法是不正确的，希望大家在实际应用中时一定要注意多层次阴影的书写方法。同时也提醒大家在网上看相关资料时一定不能尽信，最好是能自己抽空验正一下。
在使用多层次的阴影时还需注意一个细节问题，如果前面的阴影模糊值小于后面的阴影模糊值，那么前面的显示在后面之上，如果前面阴影的模糊值大于后面的阴影模糊值，那么前面的阴影将遮住后面的阴影效果。如下面例子：
/*第一个阴影模糊半径值小于第二阴影模糊半径*/
.demo5 {
box-shadow: 0 0 5px red,0 0 15px blue;
}
/第一个阴影模糊半径大于第二阴影模糊半径*/
.demo6 {
box-shadow: 0 0 15px red, 0 0 5px blue;
}
?0?2
实例效果再次证明：左图中我们可以看见红色阴影在兰色阴影之上并没有遮盖蓝色阴影，因为我们红色的阴影模糊值只有5px，比蓝色的15px模糊值要小；而右图中我们只能看到红色的阴影，那是因为我们第一个红色阴影的模糊半径大于第二个兰色的模糊半径，所以红色的阴影把蓝色的阴影遮盖住了。这一点大家可记住了。
效果二：四边具有相同的阴影效果（只设置阴影模糊半径和阴影颜色）
.demo7 {
box-shadow: 0 0 5px rgb(250,0,0);
}
?0?2
我们在这里设置的是HEX值，我们也可以应用css3的rgba值给box-shadow的阴影颜色上，这样的好处是，box-shadow阴影色多了一个alpha透明值 ，如下面的实例：
.demo8 {
box-shadow: 0 0 5px rgba(250,0,0,0.5);
}
?0?2
对比上面两个例子，前一个例子我们没有应用透明值，而后面一个例子我们应用了0.5的透明值，相比之下后面的阴影是不是更浅。当然在实践应用中您可以根据自己的需求进行设置。
效果三：四边具有相同的阴影（只设置阴影扩展半径和阴影颜色）
.demo9 {
box-shadow: 0 0 0 1px red;
}
?0?2
从效果中大家想想这种效果是不是跟我们在元素中的boder: 1px solid red;属性产生的效果很相似的呀。对的，box-shadow不单可以制作出阴影的效果，我们还可以利用其扩展半径这个值，来给对象制作出类似于边框的样式。下面我们来看一个对比的实例：
/*边框效果*/
.demo10 {
border: 1px solid red;
}
/*阴影效果*/
.demo11 {
box-shadow: 0 0 0 1px red;
}
?0?2
实际上利用box-shadow来制作边框，只能说看上去像边框，但实质其并非边框，他和border还是有本质上的区别。从上面的效果图中我们明显的可以看出左边的box要比右边的box低那么1px的，这样一来随着其扩展半径值越大，两者之间的相差就更大
shadow box是什么意思
shadow box 报错
跟读 口语练习
陈列柜
玻璃框罩
[电影] 投影面遮暗器
网络释义 专业释义 英英释义
专业：动力与电气工程
投影面遮暗器
以上统计来源于2,447,534篇论文数据，部分数据来源于： NoteExpress
21世纪大英汉词典
shadow box
1.
(名画等展览时挂在墙上的)陈列柜，玻璃框罩
2.
(白天看电影用的)屏幕遮光器[亦作 shadow box frame]
以上来源于:21世纪大英汉词典
双语例句 权威例句
1.
Shadow box to own the center of the ring using the boxing tips in this free videoon shadow boxing. 跟读
自己的影子框中心的环上使用影子拳击技巧在此免费视频拳击。
edition.yalolo.com
2.
Use a mirror to shadow box in order to keep an eye on foot work and hand work with advice from an amateur boxer in this free video on boxing skills. 跟读
使用一面镜子影子盒，以保持在这个自由影片一徒步手工作和咨询工作，从一个业余拳击手眼拳击技巧。
edition.yalolo.com
3.
His grandfather's fiddle has been restored and mounted in a shadow box that sits on the mantle above his fireplace, complete with the snake rattles the old timersused to put inside their fiddles. 跟读
他祖父的小提琴已经被收了起来，并且被装进一个玻璃浅盖匣里，放在壁炉罩上，装在一起的还有snake rattle， 这是一种老式计时器，放在小提琴里配成完整的一套。
shadowx大陆区不能用
国外的——Zibba，Invasion ，Dinan，Danaik 国内的——Forsaken Soul，Shadow x Shadow ，新游侠（小小游侠） ，第六影 ，打猎的牜 大名鼎鼎的几位均为60年代的，国内的么有几位新秀。
论人气，zibba无可替代。第六影国内现在当红。视频去魔兽视频网和优酷搜呗。没啥第一猎人之说，各有各的风格。老一代的风筝流，逃脱流。新一代的暴击流，工程流。
CSS3-盒子阴影:box-shadow
box-shadow:none|shadow
它的值包括?6?个参数：阴影类型，X轴位移，Y轴位移，阴影大小，阴影扩展和阴影颜色。此?6?个参数可以有选择地省略。
浏览器兼容性
Webkit支持：-webkit-box-shadow
Mozilla支持：-moz-box-shadow
IE9支持：box-shadow
IE8及以前：不支持
实用实例
简单效果:
img{
height:300px;
-moz-box-shadow:5px 5px;
-webkit-box-shadow:5px 5px;
box-shadow:5px 5px;
}
虚阴影效果:
img{
height:300px;
-moz-box-shadow:2px 2px 10px #06c;
-webkit-box-shadow:2px 2px 10px #06c;
box-shadow:2px 2px 10px #06c;
}
渐变阴影效果:
img{
height:300px;
-moz-box-shadow:0 0 10px #06c;
-webkit-box-shadow:0 0 10px #06c;
box-shadow:0 0 10px #06c;
}
带光晕效果
img{
height:300px;
-moz-box-shadow:0 0 10px 10px #06c;
-webkit-box-shadow:0 0 10px 10px #06c;
box-shadow:0 0 10px 10px #06c;
}
内阴影效果
img{
height:300px;
-moz-box-shadow:inset 5px 5px 10px #06c;
-webkit-box-shadow: inset 5px 5px 10px #06c;
box-shadow: inset 5px 5px 10px #06c;
}
彩色阴影
img{
height:300px;
-moz-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
-webkit-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
}
如何在WordPress中使用shadowbox
如何将Shadowbox集成到WordPress中
集成到WordPress中，步骤与使用Shadowbox大体相同，只是要用WordPress的语言来描述。这里以默认主题twentyeleven为例。
集成Shadowbox有专门插件，但如果你想明白到底发生了什么，下面我会告诉你。
1. 下载Shadowbox脚本
到Shadowbox下载页面，adapter选择jquery，选好自己需要的功能，点击页面底部的zip或tar格式下载即可。
下载后将Shadowbox文件夹放到WordPress主题的根目录，重命名为shadowbox（可选步骤）。
2. 创建使用shadowbox的WordPress模版
创建page-shadowbox.php文件，打开文件，写模版声明，模版命名为Shadowbox
?php/*?*?Template?Name:?Shadowbox?*/
3.引入Shadowbox脚本和样式表
add_action('wp_enqueue_scripts',?'shadowbox_load_resources');
function?shadowbox_load_resources()?{
????wp_enqueue_script('shadowbox',?get_template_directory_uri()?.?'/shadowbox/shadowbox.js',?array('jquery'));
????wp_enqueue_style('shadowbox',?get_template_directory_uri()?.?'/shadowbox/shadowbox.css');
}
4. 初始化Shadowbox
add_action('wp_footer',?'shadowbox_init');
function?shadowbox_init(){
?????
????script?type="text/javascript"
????????Shadowbox.init();
????/script
?????php
}
5. 下面开始写模版文件即可
page-shadowbox.php的文件代码如下
?php
/*
?*?Template?Name:?Shadowbox
?*/
/*
?*?Load?shadowbox?stylesheet?and?javascript
?*?You?can?load?shadowbox?globally?by?put?the?code?snippets?into?functions.php
?*/
add_action('wp_enqueue_scripts',?'shadowbox_load_resources');
function?shadowbox_load_resources()?{
????wp_enqueue_script('shadowbox',?get_template_directory_uri()?.?'/shadowbox/shadowbox.js',?array('jquery'));
????wp_enqueue_style('shadowbox',?get_template_directory_uri()?.?'/shadowbox/shadowbox.css');
}
/*
?*?Init?shadowbox?at?footer,?make?sure?to?load?shadowbox.js?first
?*/
add_action('wp_footer',?'shadowbox_init');
function?shadowbox_init(){
?????
????script?type="text/javascript"
????????Shadowbox.init();
????/script
?????php
}
/*
?*?Now?we?can?start?writing?the?template
?*/
get_header();
?
div?id="primary"
????div?id="content"?role="main"
?????????php?while?(have_posts())?:?the_post();??
?????????????php?get_template_part('content',?'page');??
?????????????php?comments_template('',?true);??
?php?endwhile;?//?end?of?the?loop.???
????/div!--?#content?--
/div!--?#primary?--
?php?get_footer();??
6. 创建一个页面
选择模版Shadowbox，在编辑器中输入一些链接，记得加上rel="shadowbox"属性激活shadowbox，比如写
a href="" rel="shadowbox"solagirl/a