HTML基础___CSS样式表__下 <第十天>

学习内容:
1.列表属性 ___list-style-type__list-style-image___list-style-psition
2.光标属性 ___cursor
3.滤镜属性___alpha___blur___chroma___dropshadow___
flipH___flipV___gray__invert__mask__xray__wave

1.列表属性 :用于设置列表项的样式,包括符号,缩进
列表符号___list-style-type
语法:list-style-type:值
取值:
none:不显示任何项目符号或编号
disc:以实心圆作为项目符号
circle:以空心圆.....................
square:以实心块...................
decimal:以普通阿拉伯数字1-9.....
lower-roman:以小写罗马数字 i ii iii.....
upper-roman:以大写罗马数字 I II III.....
lower-alpha: 以小写英文字母a,b,c,........
upper-alpha: 以大写英文字母A,B,C......

图像符号__list-style-image
语法:list-style-img:none url(图像地址)

列表缩进___list-style-position
语法:list-style-position:outside \ inside
outside表示列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside表示列表项目标记放置在文本以内,且环绕文本根据标记对齐 默认值

复合属性___list-style
列表函数list-style是以上3种列表属性的组合:
如:ol{list-style:square inside url{image01.jpg);}

2.光标属性
光标属性是用于设置在对象上移动的鼠标指针所采用的光标形状.
语法:cursor:auto \ 形状取值 \url(图像地址)
说明: auto表示根据页面的内容自动选择光标形状.url表示采用自定义的图像作为光标形状
形状取值:

光标类型	CSS
把你的光标放到相应文字上查看效果	要注意光标的实际效果依赖于用户的系统设置，与你在这里看到的效果并不一定一致。
	十字准心	cursor: crosshair;
	手	cursor: pointer; cursor: hand; 写两个是为了照顾IE5，它只认hand。
	等待/沙漏	cursor: wait;
	帮助	cursor: help;
	无法释放	cursor: no-drop;
	文字/编辑	cursor: text;
	可移动对象	cursor: move;
	向上改变大小(North)	cursor: n-resize;
	向下改变大小(South)	cursor: s-resize;
	向右改变大小(East)	cursor: e-resize;
	向左改变大小(West)	cursor: w-resize;
	向上右改变大小(North East)	cursor: ne-resize;
	向上左改变大小(North West)	cursor: nw-resize;
	向下右改变大小(South East)	cursor: se-resize;
	向下左改变大小(South West)	cursor: sw-resize;
	自动	cursor: auto;
	禁止	cursor:not-allowed;
	处理中	cursor: progress;
	系统默认	cursor: default;
	用户自定义（可用动画）	cursor: url(' # '); # = 光标文件地址 (注意文件格式必须为：.cur 或 .ani)。

3.滤镜属性___filter:滤镜名称(参数1,参数2,...)

不透明度____alpha
alpha滤镜用于设置图片或文字的不透明度,它是把一个目标元素与背景混合,通俗地说就是一个元素的透明度,通过指定坐标,可以指定点,线,面的透明度.
语法:filter:alpha(参数1=参数值,参数2=参数值,...)
alpha参数:
“opacity”：代表透明度水准。范围是从0~100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
“finishopacity”：是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style”：指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
“StartX”和“StartY”：代表渐变透明效果的开始X和Y坐标。
“FinishX”和“FinishY”：代表渐变透明效果结束X和Y 的坐标。

例: Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)；
Alpha(Opacity=10, FinishOpacity=90, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)；
Alpha(Opacity=10, FinishOpacity=90, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=100)；
在使用“Alpha”滤镜时要注意：
1、由于“Alpha”滤镜使当前元素部分透明，该元素下层的内容的颜色对整个效果起着重要作用，因此颜色的合理搭配相当重要；
2、透明度的大小要根据具体情况仔细调整，取一个最佳值。

动感模糊____blur
动感模糊滤镜用于在指定块级元素的方向和位置上产生动感模糊的效果.
语法:filter:blur(add=参数值,direction=参数值,strength=参数值)
“ADD”参数是一个布尔判断“TRUE（默认）”或者“FALSE”。它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的，“DIRECTION”参数用来设置模糊的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。“STRENGTH“值只能使用整数来指定，她代表有多少像素的宽度将受到模糊影响。默认是5个。
动感模糊对HTML的块级元素(如层,图像等)有效.如果要对文字进行动感模糊,要首先将文字放置于一个快状元素内,如层,然后要确定这个块级元素的大小.

对颜色进行透明处理____chroma
chroma滤镜可以实现对所选择的颜色进行透明处理的效果.
语法:filter:chroma(color=颜色代码或颜色关键字)

设置阴影______dropshadow
dropshadow滤镜在指定的方向和位置上产生阴影.
语法:filter:dropshadow(color=阴影颜色,offX=参数值,offY=参数值,positive=参数值)
Color是下落阴影的颜色，永远用Hex格式表达。OffX和OffY是下落阴影的象素值。Positive是一个布尔值（0或1）；0指为透明象素也生成阴影；1指给不透明象素生成阴影

如:

.dropshadow {
FILTER: dropshadow(color=gray,offx=5,offy=5.positive=0)
}

style=" filter:dropshadow (color=gray, offx=5,offy=5, positive=0)"

对像的翻转______flipH,flipV
flipH滤镜可以沿水平方向翻转对象,flipV滤镜可以沿垂直方向翻转对象.
语法:filter:flipH
filter:flipV

发光效果_____glow
glow可以实现在对象周围发光的效果.
语法;filter:glow(color=颜色代码,strength=强度值)
。“COLOR”是指定发光的颜色，“STRENGTH”则是强度的表现，可以从1到255之间的任何整数来指定这个力度。

.grow {
FILTER: glow(color=red,strength=10);
}

Ｇlow发光效果

灰度处理____gray
语法:filter:gray
把图片变成灰度图.

反相__invert
语法:filter:invert
将对象可视化属性全部反转,包括色彩,饱和度和亮度值

X光效果____xray
语法:filter;xray
Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。X光效果滤镜也不需要设定参数，是一种很少见的滤镜。它想灰色滤镜一样去除图象的所有颜色信息，然后将其反转（黑白象素除外）。

遮罩效果____mask
语法：filter:mask(color=color)
　　使用“MASK”属性可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。该滤镜将可看见的象素遮蔽，将看不见的象素以指定的颜色显示。


　


波形滤镜_____wave
语法：filter:wave(add=参数值,freq=参数值,lightstrength=参数值,phase=参数值,strength=参数值)
　　波形滤镜能造成一种强烈的变形幻觉，它对过滤目标生成正弦波变形，同相应语言应用于Tandem能产生最佳的动画效果。
　　“wave”属性把对象按垂直的波形样式打乱。默认是“TRUE（非0）”，“ADD”表示是否要把对象按照波形样式打乱，“FREQ”是波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹，“LIGHTSTRENGTH”参数可以对于波纹增强光影的效果，范围0----100，“PHASE”参数用来设置正弦波的偏移量。“STRENGTH”代表振幅大小。


　

　


本文出自 “Persist Persist Insists” 博客，谢绝转载！