///pc/img/blank.gif" width="12" height="8">当前位置：///default.htm" class="under">亿度网络 -> ///pc/index.htm" class="under">网页制作教程 -> CSS教程

CSS教程 ///pc/img/title_00.gif" width="13" height="20">  

　→ CSS快速入门
　→ 怎样编写CSS
　→ CSS属性
　→ CSS定位
　→ CSS滤镜
　　 1.概述
　　 2.Alpha属性
　　 3.Blur属性
　　 4.Chroma属性
　　 5.Dropshadow属性
　　 6.Fliph、Fliv属性
　　 7.Gray属性
　　 8.Glow属性
　　 9.Invert属性

/pc/bin/msg.pl?file_id=k_css target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法

 

///pc/img/blank.gif" width="1" height="1">

 


五、CSS滤镜

 

　　6、FlipH、FlipV属性

　　Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是：

　　Filter：FlipH

　　Filter：FlipV

　　我们先来看一幅图：点击可放大

///pc/homepage/css/img/css036.jpg" target="_blank">///pc/homepage/css/img/css0361.gif" width="100" height="75" border="0" alt="原图">

　　下面我们分别对它实现水平翻转和垂直翻转，并且在图片上方的一段文字，也发生翻转。代码如下：

　　<html>
　　　<head>
　　　<title>flip css</title>
　　　<style>//*设置CSS样式开始*//
　　　<!--
　　　div{position：absolute；top：20；width：300；
　　　　　filter：fliph（flipv）；}
　　　//*定义DIV范围内的样式，绝对定位，翻转为水平翻转或垂直翻转。
　　　 注意：在这里fliph和flipv只取其中的一个*//
　　 img{position：absolute；top：70；left：40；
　　　　 filter：fliph（flipv）；}
　　　//*定义图片的样式，绝对定位，翻转属性和DIV一样。*//
　　　 -->
　　 </style>
　　 </head>
　　　<body>
　　　<div>
　　　<p style=“font-family：bailey；font-size：36pt；
　　　　　　　　　font-weight：bold； color：rgb(10,128,156)；”>
　　　 Leaf Village </p>
　　 //*定义字体名称、大小、粗细、颜色*//
　　 </div>
　　 <p><img src=“ss05058.jpg”></p>
　　 //*导入一张图片*//
　　 </body>
　　</html>

　　代码产生的两个效果分别如下图：（点击可以放大）

///pc/homepage/css/img/css037.jpg" target="_blank">///pc/homepage/css/img/css0371.gif" width="100" height="77" border="0" alt="水平翻转">　　　　　　　　　　　　　///pc/homepage/css/img/css038.jpg" target="_blank">///pc/homepage/css/img/css0381.gif" width="100" height="75" border="0" alt="垂直翻转">

　　　　　　　　水平翻转　　　　　　　　　　　　　　　　垂直翻转

　　翻转的属性应用是不是很简单。下一节我将向您介绍Glow属性。

上一节　下一节   

 

/pc/bin/msg.pl?file_id=k_css target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法

 

 

网页制作 网页设计 网站建设 网站设计 网站制作 做网站 做网页