关键字‘私有属性’的相关文章

探讨文本阴影和盒阴影

定义文本阴影格式为text-shadow:length1 lenth2 length3 color,其中length1、length2分别为在水平方向和垂直方向的偏移量,length3是模糊半径,color为颜色值,如果 length1为正值,说明向右偏移,负值则向左偏移;同理,length2为正值,说明向下偏移,负值则向上偏移。具体效果见下图:

探讨文本阴影和盒阴影

可喜的是除了以Trident为渲染引擎的浏览器外(IE内核),其他主流浏览器的较新版本都可以完美支持此属性,通过上图也可以看到此属性的神奇效果也是立竿见影。

相对于文本阴影,盒阴影的定义要复杂那么一点点,由于盒模型还在进一步的发展中,所有要想体验它的魔幻特性,要通过浏览器的私有属性来声明。

  1. Firefox3.5通过私有属性-moz-box-shadow来声明,包括多阴影、inset关键字和传播半径。
  2. Safari/Chrome跟Firefox实现方式类似,通过私有属性-webkit-box-shadow来支持阴影,多阴影从4.0版本开始支持,但是还不支持inset关键字和传播半径。
  3. Opera和微软IE浏览器还没有实现盒子阴影属性,但是在IE浏览器,您可以试着使用他们私有的DropShadow过滤器。

具体格式如下:

  • -moz-box-shadow:length1 length2 length3 length4 color;
  • -webkit-box-shadow:length1 length2 length3 length4 color;

其中length1,length2的特性和text-shadow中的一样,分别表示水平和垂直偏移量,length3表示模糊半径,length4表示传播半径,可以是正值也可以是负值,使用正值表示影子拉长,使用负值表示影子缩短,而这个长度是相对于父元素的大小而言的,在一般情况下,可以不用这个参数。

例如:

  1. #box{
  2.   margin:50px;
  3.   padding:10px;
  4.   border:1px solid #999;
  5.   -moz-box-shadow:2px 2px 6px 0 #999;
  6.   -webkit-box-shadow:2px 2px 6px #999;
  7. }
  8. <div id="box">Safari,Chrome,Mozilla Firefox3.5+下可以看到效果</div>

效果图见上,需要指出的是,盒阴影不占据普通流空间,对于这一点,有兴趣的同学可以测试一下!

认识浏览器的渲染引擎

浏览器的渲染引擎负责取得网页的内容(html、xml、图像等)、整理讯息(加入css,javascript等),以及计算网页的显示方式,然后会输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要渲染引擎。

了解浏览器的渲染类型有助于我们理解浏览器的私有属性,从而增强web设计的感,例如:

  1. -o-:以Presto为渲染引擎的浏览Opera的私有属性、
  2. -moz-:以Gecko为渲染引擎的浏览器Mozilla Firefox的私有属性
  3. -webkit-:以Webkit为渲染引擎的浏览器Safari、Google Chrome的私有属性

下表列举了几种主流浏览器的渲染引擎类型,希望对浏览器私有属性还不甚了解的朋友有所帮助!

渲染引擎 浏览器
Trident Internet Explorer
Gecko Mozilla Firefox
WebKit Safari、google Chrome
Presto Opera