作业帮CSS教程：用CSS的Blur滤镜
来源：学生作业帮助网 编辑：作业帮 时间：2024/05/09 15:40:04 CSS
CSS教程：用CSS的Blur滤镜CSS
【51Test.NET-CSS教程：用CSS的Blur滤镜】：
Blur是CSS的滤镜之一，把它加载到文字上，可产生立体字的效果，这将为你在网页上使用立体字做标题带来了极大的方便，也为你的网页减轻了分量；把Blur滤镜加载到图片上，能使你的图片增色不少，虽然用图象处理软件也能达到同样效果，但用Blur滤镜可方便多了。我将一一向你介绍，先请看下面把Blur滤镜加载到文字上的效果：
图1 原文字 图2 加载Blur滤镜后的效果
上图的效果还可以吧？！制作起来也很简单，具体方法如下：
1、点击DW3快速启动面板上的CSS图标，在弹出的对话框中点击编辑按钮，再在弹出的对话框中按“New"按钮，在弹出的对话框中输入你要新创建的Class名称，在这里我们输入“Blur1"，然后按“OK"，这些操作我想你总会吧？因它同定制普通的CSS是一样的。在弹出的“Style define for -blur1"对话框中，我们在“Category"中选择“Extensions"，在“Filter"（滤镜）中选择“Blur"并按括号中的滤镜参数值设置好参数（Blur(Add=true, Direction=135, Strength=10)），按“OK"结束。若是操作无误的话，在你网页代码的< head >与< /head >之间，会有如下所示的代码：
< style type="text/css" >
< !--
.blur1 { filter: Blur(Add=true, Direction=135, Strength=10)}
-- >
< /style >
假如你实在对滤镜设置不好的话，把上面这段代码复制到< head >与< /head > 之间也行。
2、上面做好的CSS滤镜，你可以把它加载到文字。加载的方法与加载普通的CSS Class相同，什么？你不会！那我告诉你吧！
1）在网页上插入一个1*1的表格，根据你的网页版面情况加上表格的背色，然后输入一些文字。
2）在DW3的状态栏中选取有文字的那个单元格，然后点击快速启动面板上的CSS图标（一般在DW3状态栏的右半边上），在弹出的CSS面板上选择blur1滤镜即可。此时，你可看到< td >的源代码是这样的：< td class="blur1" > 。若你对DW3不太熟悉，你在源代码的< td >中直接加上“class="blur1"”也一样。
就这么简单！
下面我们来看一看Blur滤镜加载到图片上的效果：
图3 Blur滤镜加载到图片上的效果
加载到图片上的Blur滤镜与加载到文字上的滤镜的制作方法相同。加载的方法更加简单，具体操作如下：
1）点击对象面板上的图片插入图标，插入一张图片。
2）选取图片，用鼠标点一下图片就行了；
3）点击快速启动面板上的CSS图标，在弹出的对话框中选择“blur1"即可。
在图片加载Blur滤镜是非曲直不是也很简单？！
下面解释一下Blur滤镜的参数，以便你灵活应用：
Add：是否使Blur滤镜起作用，Add=False(或“0”)时Blur滤镜不起作用，取True（或非“0”值）时Blur滤镜起作用，它实际上是一个布尔参数，只有两个值，即true和false；
Direction：阴影的方向，取值范围0~360度，45度一个间隔，所以实际上只有八个方向值；
Strength：它代表有多少个像素的宽度成为阴影，你也可以简单地理解为阴影的长度。它只能用整数来指定，默认值是5个像素，你可以根据实际需要来指定阴影的长度。我上面的两个例子是用的同一个滤镜，Strength是10个像素。同一网页中可以使用不同参数的Blur滤镜，你只要给它们取不同的名称就行了，如象下面这样：
< style type="text/css" >
< !--
.blur1 { filter: Blur(Add=true, Direction=135, Strength=10)}
.blur2 { filter: Blur(Add=true, Direction=135, Strength=20)}
.blur3 { filter: Blur(Add=true, Direction=225, Strength=10)}
-- >
< /style >
Blur滤镜的使用不难吧！产生的效果却不凡，赶快动手试试吧！CSS
Blur是CSS的滤镜之一，把它加载到文字上，可产生立体字的效果，这将为你在网页上使用立体字做标题带来了极大的方便，也为你的网页减轻了分量；把Blur滤镜加载到图片上，能使你的图片增色不少，虽然用图象处理软件也能达到同样效果，但用Blur滤镜可方便多了。我将一一向你介绍，先请看下面把Blur滤镜加载到文字上的效果：
图1 原文字 图2 加载Blur滤镜后的效果
上图的效果还可以吧？！制作起来也很简单，具体方法如下：
1、点击DW3快速启动面板上的CSS图标，在弹出的对话框中点击编辑按钮，再在弹出的对话框中按“New"按钮，在弹出的对话框中输入你要新创建的Class名称，在这里我们输入“Blur1"，然后按“OK"，这些操作我想你总会吧？因它同定制普通的CSS是一样的。在弹出的“Style define for -blur1"对话框中，我们在“Category"中选择“Extensions"，在“Filter"（滤镜）中选择“Blur"并按括号中的滤镜参数值设置好参数（Blur(Add=true, Direction=135, Strength=10)），按“OK"结束。若是操作无误的话，在你网页代码的< head >与< /head >之间，会有如下所示的代码：
< style type="text/css" >
< !--
.blur1 { filter: Blur(Add=true, Direction=135, Strength=10)}
-- >
< /style >
假如你实在对滤镜设置不好的话，把上面这段代码复制到< head >与< /head > 之间也行。
2、上面做好的CSS滤镜，你可以把它加载到文字。加载的方法与加载普通的CSS Class相同，什么？你不会！那我告诉你吧！
1）在网页上插入一个1*1的表格，根据你的网页版面情况加上表格的背色，然后输入一些文字。
2）在DW3的状态栏中选取有文字的那个单元格，然后点击快速启动面板上的CSS图标（一般在DW3状态栏的右半边上），在弹出的CSS面板上选择blur1滤镜即可。此时，你可看到< td >的源代码是这样的：< td class="blur1" > 。若你对DW3不太熟悉，你在源代码的< td >中直接加上“class="blur1"”也一样。
就这么简单！
下面我们来看一看Blur滤镜加载到图片上的效果：
图3 Blur滤镜加载到图片上的效果
加载到图片上的Blur滤镜与加载到文字上的滤镜的制作方法相同。加载的方法更加简单，具体操作如下：
1）点击对象面板上的图片插入图标，插入一张图片。
2）选取图片，用鼠标点一下图片就行了；
3）点击快速启动面板上的CSS图标，在弹出的对话框中选择“blur1"即可。
在图片加载Blur滤镜是非曲直不是也很简单？！
下面解释一下Blur滤镜的参数，以便你灵活应用：
Add：是否使Blur滤镜起作用，Add=False(或“0”)时Blur滤镜不起作用，取True（或非“0”值）时Blur滤镜起作用，它实际上是一个布尔参数，只有两个值，即true和false；
Direction：阴影的方向，取值范围0~360度，45度一个间隔，所以实际上只有八个方向值；
Strength：它代表有多少个像素的宽度成为阴影，你也可以简单地理解为阴影的长度。它只能用整数来指定，默认值是5个像素，你可以根据实际需要来指定阴影的长度。我上面的两个例子是用的同一个滤镜，Strength是10个像素。同一网页中可以使用不同参数的Blur滤镜，你只要给它们取不同的名称就行了，如象下面这样：
< style type="text/css" >
< !--
.blur1 { filter: Blur(Add=true, Direction=135, Strength=10)}
.blur2 { filter: Blur(Add=true, Direction=135, Strength=20)}
.blur3 { filter: Blur(Add=true, Direction=225, Strength=10)}
-- >
< /style >
Blur滤镜的使用不难吧！产生的效果却不凡，赶快动手试试吧！CSS