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 的坐标。
“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、透明度的大小要根据具体情况仔细调整，取一个最佳值。
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指给不透明象素生成阴影
如: