css学习笔记（5）动态定位 滤镜

12、动态定位

position 定义位置 absolute relative static

left top指定横向纵向坐标位置  length percentage auto

width heigth 指定占用空间大小

clip 剪切 shape auto

overflow 内容超出时的处理 visible hidden scroll auto

z-index产生立体效果 auto integer

visibility定义可见性

定义一个类

<style type="text/css">
 <!--
 .pile
 {position:absolute;left:2in;top:2in;width:3in;height:3in;}
 -->
</style>

以后要引用这个类，直接用class="pile"就好。

 

13、滤镜

基本书写格式 filter:filtername{parameters}

alpha 设置透明度

blur 设置模糊效果

chroma 指定颜色透明度

dropshadow设置投射阴影

fliph水平翻转

flipv 垂直翻转

glow 为对象的外边界增加光效

grayscale 设置灰度

invert 这支底片效果

light 设置灯光投影

mask 设置透明膜

shadow 设置阴影效果

wave 利用正弦波打乱图片

xray只显示轮廓

filter:alpha (opacity=(0-100), finishopacity=(0-100为了渐变效果), style=(0(统一形状),1(线形),2(放射状),3(长方形) ), startX=aa, startY=aa, finishX=aa, finishY=aa)

filter:blur (add=(true false), direction=(每45度一个单位), strength=(int 多少像素将受到影响))

同时用blur滤镜可以设置字体的效果

filter:chroma(color=red)

filter:dropshadow(color=red, offX=int, offY=int, positive=(true, false))

添加对象的阴影效果

filter:fliph/filpv 无参数

filter:glow(color=red, strength=(1-255))

边缘产生类似发光的效果

filter:gray 没有参数，产生灰度图

filter:invert 没有参数，将对象的色彩，饱和度，亮度完全翻转

filter:mask(color=red) 建立一个覆盖在对象表面的膜。

filter:shadow(color=color, direction=int)

shadow 和dropshadow不同在于shadow可以任意角度定义阴影，而dropshadow是通过便宜来达到阴影的效果。

filter:wave(add=(true, false), freq=频率, lightstrength=增强光效(0-100), phase=偏移量(0-100), strength=强度)

filter:xray 没有参数，产生X光的效果