第九章 光标与滤镜

光标属性cursor和滤镜

.1光标属性
设置在对象上移动时鼠标指针采用的光标形状
语法:
cursor:auto | 形状取值 | url(图像地址)
取值有以下:

default  默认光标（通常是一个箭头）
auto  默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move  此光标指示某对象可被移动。
e-resize  此光标指示矩形框的边缘可被向右（东）移动。
ne-resize  此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize  此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize  此光标指示矩形框的边缘可被向上（北）移动。
se-resize  此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize  此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize  此光标指示矩形框的边缘可被向下移动（南）。
w-resize  此光标指示矩形框的边缘可被向左移动（西）。
text  此光标指示文本。
wait  此光标指示程序正忙（通常是一只表或沙漏）。
help  此光标指示可用的帮助（通常是一个问号或一个气球）。

---------------------------------------------------------------

.2滤镜属性

CSS中的滤镜属性于Photoshop中的滤镜相似。使用滤镜属性可以把一些特殊效果添加到网页元素中，使网页美观

.2.1不透明alpha

设置对象内容的透明度，使图片产生透明渐变效果
语法:
filter:alpha(参数 1=参数值，参数 2=参数值，...)
各参数
opacity  开始时的透明度，取值范围为0~100,默认值为0,即完全透明，100 为完全不透明
finishopacity  结束时的透明度，取值范围为0~ 100
style  设置渐变的样式，其中0表示无渐变，1 为直线渐变，2为圆形渐变，3为矩形渐变
startx  设置透明渐变开始点的水平坐标。其数值作为对象宽度的百分比处理，默认值为0
starty  设置透明渐变开始点的垂直坐标
finishx  设置透明渐变结束点的水平坐标
finishy  设置透明渐变结束点的垂直坐标

.2.2 动感模糊blur

blur属性用于设置对象的动态模糊效果
语法:
filter:blur(add=参数值，direction=参数值，strength=参数值)
参数:
add 设置是否显示原始图片
direction 设置动感模糊的方向，按顺时针方向以45度为单位进行累积
strength 设置动感模糊的强度，只能使用整数来指定，默认5个

.2.3对颜色进行透明处理chroma

chroma的滤镜作用是将图片中的某种颜色转换为透明色，产生透明效果
语法:
filter:chroma(color=颜色代码或颜色关键字)

.2.4阴影效果dropShadow

dropShadow滤镜用于设置在指定方向和位置上产生阴影效果
语法:
dropShadow(color=阴影颜色，offX=参数值，offY=参数值，positive=参数值)
说明:
color属性控制阴影颜色
offX和offY分别设置阴影相对于原始图像移动的水平距离和垂直距离
positive属性设置阴影是否透明

.2.5对象翻转flipH,flipV

flipH滤镜用于设置沿水平方向翻转对象，flipV滤镜属性用于设置沿垂直方向翻转对象。
语法:
filter:Fliph
filter:Flipv

.2.6发光效果glow

glow滤镜用于设置在对象周围发光的效果
语法:
filter:Glow(color=颜色代码，strength=强度值)
说明:
color:用于设置发光的颜色
strength:用于设置发光的强度，取值范围1~255，默认值为5

.2.7灰度处理gray

gray滤镜用于把彩色图片中的色彩去掉，转换为黑白色图片
语法:
filter:gray

.2.8反相invert

invert滤镜用于设置对象反相，可以将图片的颜色，饱和度以及亮度完全反转过来
语法:
filter：invert

.2.9X光片效果xray

xray滤镜用于制作类似X光片的效果

.2.10遮罩效果mask

mask滤镜用于为对象产生遮罩效果，可以做出像印章一样的效果
语法:
filter：Mask(color=颜色代码)
说明:color用于设置外围遮盖的颜色，可以是颜色关键字或16进制数

.2.11波形滤镜ware

ware滤镜用于为对象内容创建波纹扭曲效果
语法:
filter:wave(add=参数值，frag=参数，lightstrength=参数值，phase=参数值，strength=参数值)
说明:
add:用于设置是是否要把对象按照波形样式打乱；
freq:用于设置图片上的波形数目；
lightstrength:用于设置波浪的关照强度，取值范围0~100
phase:用于设置波浪的起始位置
strength:用于设置波浪的强度大小