稍微旋转一下标志，使之不再与条幅的直边平行。 Download css3banner/style.css#badge{ -moz-transform: rotate(-7.5deg); -o-transform: rotate(-7.5deg); -webkit-transform: rotate(-7.5deg) -ms-transform: rotate(-7. 5deg) ; transform: rotate(-7.5deg);}8.2实例18:使用阴影、渐变和变换●117 使用CSS3进行旋转非常简单。我们只需要提供旋转的角度，页面就会自动渲染了。被旋转元素中的所有元素都会跟着一块旋转。 实现旋转与实现圆角一样简单，但是不要滥用它。界面设计的目标是使用户界面更加便于使用。如果旋转了包含很多内容的元素，一定要确保用户阅读内容的时候不用朝一个方向太过扭头。8.2.5调节背景的透明度 在文本后面加入半透明层来调节透明度的方法比较典型，很早前平面设计师就开始使用了。这种方法通常需要在Photoshop中创建一幅完整的图片或者使用CSS在另一个元素的上面放置一个透明的PNG层。CSS3通过一种新的语法提供了对背景色透阴度的支持。 初次接触Web开发时，大家都学习过使用十六进制颜色码定义颜色，用两个数字对来表示红色、绿色和蓝色。00就是都关闭，即没有，FF就是都开启。因此红色就是FFOOOO，也可以理解为红色开启、蓝色和绿色关闭。 CSS3引入了rgb和rgba函数。rgb函数与十六进制表示法类似，但使用0～255的数字来表示每种颜色。可以定义红色为rgb (255，0，0)。 rgba函数与rgb -样，只不过多了一个参数来定义不透明度(0～1)。如果取值为0，就什么颜色也看不到，因为是完全透明的。如果想得到半透明的白色区域，可以加入如下样式： Download css3banner/sfyle.css #info{ background-color: rgba(255,255 ,255 ,0.95); ) 有时用户显示器的对比度设置会影响上述透明度的效果，因此必须在多种显示设置情况下试验，才能保证得到一致的显示效果。 让我们将横幅广告的info区域圆角化：118◆第8章柔化视觉体验Download css3banner/style.css#info{ moz-border-radius: 12px; webkit-border-radius: 12px o-border-radius: 12px; border-radius: 12px; 应用上述样式后，条幅在Safari. Firefox和Chrome下都能显示得非常漂亮了。接下来让我们完成在Internet Explorer中的样式设置。8.2.6 回退 本节中济南网页设计公司使用的技术，在IE9中是有效的，但是在IE6. IE7和IE8中都有一些问题！需要使用微软的DirectX过滤器来解决。这意味着我们需要依赖于条件声明加载一个只针对IE浏览器的样式表。我们还需要使用JavaScript创建一个section元素，然后使用CSS来渲染它，因为这些版本的IE不能原生识别该元素。Download css3banner/index.htm<!--[if lte IE 8]><script>document.createElement( "sect/on") ;</script><link rel="stylesheet" href="ie.css" type="text/css" media="screen"> < ! [endif] --></head><body> <div id="conference"> <section id="badge"> <h3>H1, My Name Is<]h3><h2>Barney</h2></section> <section id="info"></section></div></body></html> DirectX迂滤器在IE6. IE7.和IE8中都能工作，但是在IE8中的触发方式不同。因此，需要对每个触发器定义两遍。下面我们来看下如何旋转元素。8.2.7旋转8.2实例18:使用阴影、渐变和变换●119 我们可以使用这些过滤器来旋转元素，但是没有仅仅定义旋转角度那么简单。为了达到我们想要的效果，需要使用Matrix过滤器，并指定我们需要角度的正弦余弦。具体来讲，要给函数传递参数余弦、正弦的相反数、正弦和余弦（与第一个参数相同），如下所示：。Download css3banner/filters.cssfilter: progid:DXImageTransform.Microsoft.Mat rix( sizingMethod='auto expandl,M11=0.9914448613738104,M12=0.13052619222005157,M21=-0.13052619222005157,M22=0.9914448613738104 ); -ms-filter:¨progid:DXImageTransform.Microsoft.Mat rix( sizingMethod=’auto expand’， M11=0.9914448613738104, M12=0.13052619222005157, M21=-0.13052619222005157, M22=0.9914448613738104 )”； 太复杂了？是的，尤其是与前面的例子相比时。别忘了，我们前面希望的转动角度是-7.5度。因此，本例中负角的正弦为负数，而我们需要一个正数。 数学是挺难懂的，让我们接着实现渐变吧。81218渐变 IE浏览器的渐变过滤器与其他浏览器中的类似，只是我们需要加入较多的代码。提供起点颜色和终点颜色，就可以实现渐变了： Download css3banner/filters,css filter: progid:DXImageTransform.Microsoft.gradient( startColorStr=#FFFFFF, endColorStr=#EFEFEF )； -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#FFFFFF, endColorStr=#EFEFEF )¨； 与其他浏览器不同，这里我们把渐变直接应用在元素上，而不是应用在background-image属性上。①使用2×2矩阵进行线性变换。 梦之网科技 http://www.mzwkj.com