仓酷云

标题: 来讲讲：CSS3的box-shadow属性完成图层暗影效果 [打印本页]

作者: 兰色精灵 时间: 2015-1-15 23:19
标题: 来讲讲：CSS3的box-shadow属性完成图层暗影效果
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站。
破洛洛文章简介：CSS3的box-shadow属性可让我们轻松完成图层暗影效果。我们来实战详解一下这个属性。
CSS3的box-shadow属性可让我们轻松完成图层暗影效果。我们来实战详解一下这个属性。
1.box-shadow属性的扫瞄器兼容性

先来看一个这个属性的扫瞄器兼容性:

Opera:不晓得是从哪一个版本入手下手撑持的，我在发这篇文章测试的时分，恰好更新了Opera到最新的10.53版本，已撑持box-shadow属性。
firefox经由过程公有属性-moz-box-shadow撑持。
Safari和Chrome经由过程公有属性-webkit-box-shadow撑持。
一切IE不撑持(不晓得IE9是不是有所改良)。别急，我们将在文章最初会先容一些针对IE的Hack。

2.box-shadow属性的语法

box-shadow有六个可设值:
img{box-shadow:暗影范例X轴位移Y轴位移暗影巨细暗影扩大暗影色彩}
当不设暗影范例时，默许为投影效果。当设为inset时，为内暗影效果。
X轴和Y轴位移不同等但相似于photoshop内里的”角度”和”地位。
暗影巨细、扩大、色彩和Photoshop内里的都同理。3.实例剖析

让我们经由过程几个实例来看一个box-shadow的效果，先弄个复杂的html供测试：
<html>
<head>
<styletype="text/css">CSS部分写在这里</style>
</head>
<body>
<imgsrc="test.jpg"/>
</body>
</html>
请注重:为了费事儿，上面的CSS代码中只写了box-shadow，在实践利用中，你应当把-moz-box-shadow和-webkit-shadow也写上。你必要做的很简，复制两个box-shadow,在它们后面分离加上-moz-和-webkit-。
img{
-moz-box-shadow:2px2px10px#06C;
-webkit-box-shadow:2px2px10px#06C;
box-shadow:2px2px10px#06C;
}
破洛洛文章简介：CSS3的box-shadow属性可让我们轻松完成图层暗影效果。我们来实战详解一下这个属性。

(1).投影，没有位移，10px的暗影巨细，没有扩大，色彩#06C
img{box-shadow:0010px#06C;}

这里的色彩值是HEX值，我们还可使用RGBA值，RGBA值的优点是，它多了一个Alpha通明值，你能够把持暗影的通明度。
img{box-shadow:0010pxrgba(0,255,0,.5)}
(2).在下面的基本上加上20px的扩大
img{box-shadow:0010px20px#06C;}

(3).内暗影，无位移，10px巨细，没有扩大，色彩#06C
img{box-shadow:inset0010px#06C;}

破洛洛文章简介：CSS3的box-shadow属性可让我们轻松完成图层暗影效果。我们来实战详解一下这个属性。

(4).多重暗影效果
box-shadow能够同时利用屡次，我们来个四色的暗影。
img{box-shadow:-10px010pxred,box-shadow:10px010pxblue,box-shadow:0-10px10pxyellow,box-shadow:010px10pxgreen}

(5).利用多个暗影属性的按次成绩
当给统一个元素利用多个暗影属性时，必要注重它的按次，开始写的暗影将显现在最顶层。好比上面这段代码，我们先写一个10px的绿色暗影，再写一个10px巨细但扩大20px的暗影。了局是：绿色暗影层在黄色暗影层之上。
img{box-shadow:0010pxgreen;box-shadow:0010px20pxyellow}

但假如我们把按次调一下，像如许:
img{box-shadow:0010px20pxyellow,box-shadow:0010pxgreen;}

我们将看不到后写的绿色暗影层，由于它先写且半径对照年夜的黄色层掩盖失落了。
4.让IE也撑持box-shadow

IE自己是shadow滤镜能够完成相似效果的，另有一些js和.htc的hack文件能够匡助你在IE中完成这一效果。我也没法逐一都往实验，这里只先容我用过的一个。
ie-css3.htc是一个可让IE扫瞄器撑持部分CSS3属性的htc文件，不但是box-shadow，它还可让你的IE扫瞄器撑持圆角属性border-radius和笔墨暗影属性text-shadow。
它的利用办法是：下载它并放到你的服务器目次
在你的<head></head>内里写进上面的代码:

蓝色部分输出要利用box-shadow属性的选择器，绿色部分输出ie-css3.htc的相对路径，或绝对路径，归正要包管能会见失掉。
然后如许就OK了。但仍是有几点必要注重的是：

当你利用了这个htc文件后，你的CSS内里，只需写有box-shadow,-moz-box-shadow或-webkit-box-shadow的任何一种，IE就会衬着。
当利用了这个htc文件后，你不克不及如许写box-shadow:0010pxred;而应当是box-shadow:0px0px10pxred;不然IE中会生效。
不撑持RGBA值中的alpha通明度。
不撑持inset内暗影。
不撑持暗影扩大。
暗影在IE中只会显现为玄色，不论你设置成别的甚么色彩。

以是说，这个剧本了仅仅是让IE撑持了部分的box-shadow值。假如你有别的更好的IEhacks剧本，接待留言分享。
原文：http://paranimage.com/css3-box-shadow-property-tutorial/
</p>
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。

作者: 谁可相欹 时间: 2015-1-17 21:50
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 兰色精灵 时间: 2015-1-24 11:26
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 愤怒的大鸟 时间: 2015-2-1 09:59
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 飘灵儿 时间: 2015-2-7 04:43
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 第二个灵魂 时间: 2015-2-20 21:40
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 乐观 时间: 2015-3-6 19:11
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 深爱那片海 时间: 2015-3-13 08:07
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 冷月葬花魂 时间: 2015-3-13 08:07
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 简单生活 时间: 2015-3-20 17:09
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

欢迎光临仓酷云 (http://ckuyun.com/)