仓酷云

标题: CSS教程之CSS3中很有效的特征:CSS暗影 [打印本页]
作者: 蒙在股里    时间: 2015-1-15 23:31
标题: 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;}
复制代码
效果以下图：
CSS教程之CSS3中很有效的特征:CSS暗影
登录/注册后可看大图

该属性今朝被除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);}
复制代码
效果如图：
CSS教程之CSS3中很有效的特征:CSS暗影
登录/注册后可看大图

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

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

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;}
复制代码
效果如图：
CSS教程之CSS3中很有效的特征:CSS暗影
登录/注册后可看大图

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

CSS暗影是CSS3中很有效的特征，我们已能够在Firefox/webkit/Opera中利用text-shadow，很快也能够在这些扫瞄器中完成box-shadow。惟独IE挺拔独行，还在保持它那糟糕的滤镜，这真是个杯具。
</p>
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
作者: 精灵巫婆    时间: 2015-1-17 23:07
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
作者: 第二个灵魂    时间: 2015-1-25 09:20
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
作者: 爱飞    时间: 2015-2-2 21:47
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
作者: 不帅    时间: 2015-2-8 07:45
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。
作者: 活着的死人    时间: 2015-2-25 02:10
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
作者: 分手快乐    时间: 2015-3-7 15:57
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
作者: 金色的骷髅    时间: 2015-3-15 09:39
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。
作者: 因胸联盟    时间: 2015-3-22 01:07
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2