Css filter:滤镜修饰图片代码实例

时间：2015-04-02 16:34:29 　来源：免费模板网　作者：风雪　阅读次数　tagscss特效

　CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象，我们先来看一下它的书写格式：
　　 filter：filtername（parameters）

　　怎么样？是不是很简单，看上去与前面讲的属性定义没什么太大的差别。Filter是滤镜属性选择符。
　　也就是说，只要您进行滤镜操作，就必须先定义filter；filtername是滤镜属性名，这里包括alpha、blur、chroma等等多种属性Css filter:滤镜修饰图片实例，同一张照片，通过定义不同的CSS修饰效果，会获得让你意想不到的效果。其实这里仅使用了CSS中的Fliter滤镜，设置Fliter不同的参数，得到不同的光照角度，出来的效果当然也就不一样了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css属性实例</title>
<style>
.p1
{
   filter : progid:DXImageTransform.Microsoft.Alpha 
( enabled=bEnabled , style="0" , opacity=2"0" , finishOpacity="100" , startX="10" , startY="20", finishX="100" , finishY="80" );

}
.p2
{
   filter : progid:DXImageTransform.Microsoft.Alpha 
( enabled=bEnabled , style="1" , opacity=2"0" , finishOpacity="100" , startX="10" , startY="20", finishX="100" , finishY="80" );

}
.p3
{
   filter : progid:DXImageTransform.Microsoft.Alpha 
( enabled=bEnabled , style="2" , opacity=2"0" , finishOpacity="100" , startX="10" , startY="20", finishX="100" , finishY="80" );

}
.p4
{
   filter : progid:DXImageTransform.Microsoft.Alpha 
( enabled=bEnabled , style="3" , opacity=2"0" , finishOpacity="100" , startX="10" , startY="20", finishX="100" , finishY="80" );

}
p
{
  float:left;
  height:250px;
  width:300px;
  border:2px solid #000000;
  margin:0 10px 10px 0;
  background:#666666;
}
img
{
  width:250px;
} 
</style>
</head>

上篇：使用css做三角边效果

下篇：属于css制作不同的鼠标提示样式

本文地址：https://www.freemoban.com/bjrm/2015/0402/1182.html

猜你喜欢