114◆筹8章柔化视觉体验     float:left ;     background-image:   u rl (iimages/awesomeconf.jpgi) background-position: center, height: 240px;}#badge{ text-align: center; width: 200px; border: 2px solid blue;}#info{ margin: 20px; padding: 20px width: 660px; height: 160px}#badge, #info{  float: left;  background-color: #fff;}#badge h2{ margin: 0; color: red; font-size: 40px}#badge h3{ margin: 0; background-color: blue color: #fff;}    对页面应用上述样式表后，可以使标志与内容区域并排显示，如图8-4所示。接下来让我们来修饰标志。图8-4横幅广告初稿8.2.2增加渐变8.2实例18:使用阴影、渐变和变换●115    修改标志的定义，将其背景色由白色改为从白到浅灰的渐变色。渐变样式在Firefox、Safari和Chrome中都会被支持，但是特定于Firfox的实现方法却不同。Chrome和Safari都使用Webkit的语法，按最原始方案来实现，而Firefox使用的语法与W3C方案的类似。同样，需要使用浏览器前缀（参见8.1.2节）。。 Download css3banner/st/le.css#badge{ background-image: -moz-linear-gradient(   top, #fff, #efefef  );background-image: -webkit-gradient(  linear,left top, left bottom,  color-stop(0, #fff),  color-stop(l, #efefef));    background-image: linear-gradient(    top，#fff，#efefef    )；    )    Firefox使用-moz-linear-gradient方法，该方法中需要指定渐变的起始点位置、起点的颜色和终点的颜龟。    基于Webkit内核的浏览器允许我们设置中间节点的颜色。在本例中济南网页设计只需要从白色渐

变到灰色，但如果还需要渐变到其他颜色，那么只需要增加一个新的中间节点颜色就可以了。8.2.3给标志加上阴影    为标志加阴影也很简单。加上阴影可以使其看起来像是突显在横幅广告的前面，增加立体感。传统的做法是使用Photoshop给图片加上阴影或者以背景图片的形式插入阴影，而使用CSS3的box-shadow属性，可以轻松地为页面元素实现阴影效果。。    将该属性加入到样式表中，为标志增加阴影效果：Download css3banner/style.css#badge{①参见 http://dev.w3.org/csswg/css3-images/#linear-gradients。②参见 http://www.w3.org/TR/css3-background/#the-box-shadow。116◆第8章柔化视觉体验    -moz-box-shadow: 5px 5px 5px #333;    -webkit-box-shadow: 5px 5px 5px #333;    -o-box-shadow:  5px 5px 5px #333;    box-shadow: 5px 5px 5px #333;    )    box-shadow属性有4个参数。第一个是水平偏移量，正数代表阴影会出现在目标元素的右边，负数代表阴影会出现在元素左边。第二个参数是垂直偏移量，正数代表阴影会出现在目标元素的下面，负数代表出现在目标元素的上面。    第三个参数是模糊半径。值为0的时候，阴影看起来非常清晰尖锐。值越大，阴影越模糊。最后一个参数定义了阴影的颜色。    我们需要不停地调整这些参数，来体会其工作原理，并找到那组适合我们的参数。当使用阴影时，需要首先调研一下现实生活中阴影的原理。用一束光照射在物体上，或者到外面去观察阳光下物体的阴影。这个调研非常重要，因为如果创建了一些不协调的阴影，尤其是对多个元素使用了不正确的阴影时，会使用户界面显得更加混乱。最简单的方法是，对每个元素的阴影都使用相同的设置。文本上的阴影    除了对元素增加阴影样式，对文本也可以添加阴影效果。这与box-shadow粪似：    hl{text-shadow: 2px 2px 2px #bbbbbb;)    需要定义X.】，方向的偏移量、模糊度和阴影的颜色。IE6. IE7和IE8中也已经通过使用Shadow过滤器支持文本阴影：    filter: Shadow(Color=#bbbbbb,    Di rection=135．    Strength=3)；    这与在元素上应用阴影的方法是一样的。文本上的阴影会带来一种精致的效果，但是如果阴影太重的话会让文本变得不容易阅读。8.2.4旋转标志    我们可以使用CSS3的变换来旋转、缩放、倾斜元素，就像使用矢量图像程序Flash、Illustrator.  Inkscape -样。。旋转可以使元素更突出，使Web页面看起来不再四四方方。让我们见 http://www.w3 .org/TR/c ss3 -2d-trans forms/#transform-propertY 。