CSS教程之CSS3中很有效的特征:CSS暗影

声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
网页制造Poluoluo文章简介：CSS暗影详解.
计划师经常利用一些共同的字体效果和页面效果，暗影是个中一个，它可让页面中的笔墨和元素具有平面的效果，从而被凸起出来。传统的办法我们大概经常必要将笔墨切出来，间接利用图片，假如思索SEO和网站功能，还大概会利用CSSSprites等手艺将图片整合，好比：

1. 1234

复制代码

1. h2{background:url(sprites.png)no-repeat00;font-size:0;text-indent:-9999em;...}h2#title1{background-position:0-30px;}h2#title2{background-position:0-60px;}....

复制代码

这是很辣手的事变，拼合图片会花失落你的大批工夫，并且为了完成更好视觉效果，你大概还要利用高质量的32位png图片，这又要让你面临活该的IE6的png通明成绩！
现实上，关于笔墨的暗影效果，我们完整能够用CSS来完成！
能够检察检察demo先。
Text-shadow

text-shadow可让我们完成完善的笔墨暗影效果。基础写法：

1. text-shadow:[色彩x轴y轴含混半径],[色彩x轴y轴含混半径]...

复制代码

大概

1. text-shadow:[x轴y轴含混半径色彩],[x轴y轴含混半径色彩]...

复制代码

这里的色彩就是暗影的色彩，你能够将色彩写在后面，也能够写在最初。x轴和y轴分离是其暗影的偏移地位，含混半径能够了解为暗影长度。并且如今年夜部分扫瞄器都撑持多层暗影，你能够用逗号分隔多组设置(固然也能够只是用单个设置)。
示例：

1. h1{color:#000;background:#333;font:bold24px/2"微软雅黑",Arial;text-indent:2em;text-shadow:black2px2px2px;}

复制代码

效果以下图：

登录/注册后可看大图

该属性今朝被除IE以外的年夜部分扫瞄器撑持，关于IE，我们可使用shadow滤镜来完成：

1. filter:Shadow(Color=black,Direction=135,Strength=2)

复制代码

你大概已注重到，利用shadow滤镜只能界说角度direction，而不克不及界说xy轴，z轴也被换成了strength。注重，利用该滤镜的时分，不克不及够设置背景色彩，不然滤镜将有效！别的假如你的数学不是很好，不太懂三角函数的算法，你可使用IE的别的一个滤镜：dropshadow：

1. filter:dropshadow(OffX=2,OffY=2,Color=black,Positive=true);

复制代码

好吧，IE老是会拖我们的后腿的，不外值得一提的是，IE的这两个滤镜是撑持多层暗影的！好比，能够如许写：欲懂得更多关于IE的这两个滤镜，请检察：Shadow和Dropshadow
让我们看一个多层暗影的例子：

1. h1{font:bold32px/2Verdana,Geneva,sans-serif;color:#f39;text-shadow:1px1px2pxrgba(0,0,0,.8),001emrgba(255,0,255,0.5),000.2emrgba(0,0,255,0.9);}

复制代码

效果如图：

登录/注册后可看大图

这里我们利用到了rgba色采，它是一种在CSS中同时声明色彩及其通明度的一种办法，且被年夜多半A级扫瞄器撑持的色采属性（除IE），懂得更多请会见：《RGBa色采的扫瞄器撑持》——同时我们保举关于纯色半通明的情形利用这类复杂的写法。
text-shadow的扫瞄器兼容性

今朝text-shadow被Firefox3.5+，Safari1.1+/chrome2.0+和opera9.5撑持，IE不撑持。必要注重的是，Safari只要4.0才撑持多层暗影。

• IE各个版本都不撑持text-shadow；
  
• Opera9.5+撑持最多6-9层暗影，并利用CSS2衬着按次(开始界说的暗影在最上面)。并且出于功能的缘故原由，含混半径被限定到100px；
  
• Gecko(Firefox)实际上撑持无穷层text-shadows(不外不倡议实验)并遵守新的CSS3衬着按次(开始界说的暗影在最下面)；
  
• Safari1.1-3.2只撑持单层text-shadow(只显现第一个逗号之前的声明而忽视前面的)。Safari4.0+才撑持多层暗影和新的CSS3衬着按次；
  

box-shadow

先来讲IE，IE不撑持box-shadow属性，可是下面提到的两个滤镜都能够用来完成暗影效果。这也就是说，IE并没有把笔墨暗影和盒子暗影辨别！这就会呈现一些成绩：元素中的笔墨会承继元素的暗影设置。可是假如你不界说该元素的background和color，就只会呈现笔墨暗影，假如只界说background属性而不界说border，就只会呈现盒子暗影，笔墨不会呈现暗影；而假如只界说了border属性而不界说background，就即会呈现盒子暗影，内容笔墨及图片也会呈现暗影。有乐趣的同砚能够折腾一下。
好了，如今让我们忘了IE，来看一看box-shadow。现实上，懂得了text-shadow以后，box-shadow就很好了解了，今朝只要firefox和safari/chrome经由过程公有属性撑持box-shadow属性。而Opera扫瞄器固然今朝还不撑持该属性，可是在其文档中提到下一个版本的引擎Presto2.3（今朝最新版的Opera10.10的引擎是Presto2.2.15）中将会撑持box-shadow，那就让我们渐渐守候吧。
box-shadow的语法和text-shadow是一样的。

1. #boxShadow{...-webkit-box-shadow:2px2px2pxblack;-moz-box-shadow:2px2px2pxblack;...}

复制代码

现实上，box-shadow和border-radius是很好的伙伴：

1. #boxShadow1{-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;border:1pxsolidddd;-webkit-box-shadow:0010pxblack;-moz-box-shadow:0010pxblack;padding:10px;}

复制代码

效果如图：

登录/注册后可看大图

firefox在3.5版本中才入手下手撑持box-shadow，今朝对暗影的衬着还不是很完善。
总结

CSS暗影是CSS3中很有效的特征，我们已能够在Firefox/webkit/Opera中利用text-shadow，很快也能够在这些扫瞄器中完成box-shadow。惟独IE挺拔独行，还在保持它那糟糕的滤镜，这真是个杯具。
</p>
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.