灯火互联
管理员
管理员
  • 注册日期2011-07-27
  • 发帖数41778
  • QQ
  • 火币41290枚
  • 粉丝1086
  • 关注100
  • 终身成就奖
  • 最爱沙发
  • 忠实会员
  • 灌水天才奖
  • 贴图大师奖
  • 原创先锋奖
  • 特殊贡献奖
  • 宣传大使奖
  • 优秀斑竹奖
  • 社区明星
阅读:3441回复:0

CSS滤镜之FlipH、FlipV属性

楼主#
更多 发布于:2011-10-03 10:07

Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,FlipV代表垂直翻转。它们的表达式很简单,分别是:
  Filter:FlipH
  Filter:FlipV
  下面我们分别对它实现水平翻转和垂直翻转,并且在图片上方的一段文字,也发生翻转。代码如下:
  <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>
  翻转的属性应用是不是很简单。下一节我将向您介绍Glow属性。

喜欢0 评分0
游客

返回顶部