《网页前端技术》CSS语言.ppt

或者： img src=*.jpg style=filter:alpha( opacity=value1, finishopacity=value2,style=value3,startx=startx, starty=starty,finishx=finish, finishy=finish ) 说明： value1为图片的透明值，范围是0（完全透明）～100（完全不透明）； value2为图片透明度变换结束时的透明值，范围是0（完全透明）～100（完全不透明） 注：该值只有在value3设定时才有效； value3为图片透明度变换方向。取值为1时，图片透明度按从左到右线性变化；取值为2时，图片透明度从内到外沿半径变化；取值为3时，图片透明度从内到外呈矩形变化； startx和starty代表渐变透明效果的开始x和y坐标； finishx和finishy代表渐变透明效果结束x和y的坐标。 二、模糊 blur滤镜作用主要是对图片的透明度进行处理 语法： { filter；blur( add=add, direction=direction, strength=strength ) } 说明： add?参数是一个布尔判断：true （默认）或false?，它指定图片是否被改变成印象派的模糊效果。 模糊效果是按顺针方向进行的，derection 参数用来设置模糊的方向。其中0°表示垂直向上，然后每45°为一个单位，默认值是向左的270°。? strength 值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响，默认是 5 像素。 三、水平翻转 fliph滤镜的作用是产生水平翻转效果； 语法：{?filter:fliph?} 四、垂直翻转 flipv滤镜的作用是产生垂直翻转效果； 语法：{?filter:flipv?} 五、灰度 gray滤镜的作用是设置灰度 语法：{filter:gray，img=src=”*.jpg”} CSS特效 HTML HEAD TITLECSS中的特效/TITLE Style Type=text/css img{ filter: flipv; blur ( strength=10); } /style /head body h2强大的CSS滤镜/h2 img src=xuexiang.jpg /body /html 案例步骤 显示效果: 按正确的顺序写出三个数字，不加空格或逗号 ( 注意，你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。 * 其中groove、ridge、inset、outset有些像3D效果，它的效果受border-color的影响。 border-style作用在四个方向时所用的方法和前面曾讲过的padding属性的书写方法相同，如果它书写四个参数值，将按照上-右-下-左的顺序定义边框。如果只设置一个，将用于四个边框统一设置。如果设置两个值，第一个作用于上下，第二个则作用与左右。如果设置三个值，第一个作用于上边框，第二个作用于左右边框，第三个作用于下边框 * 大多数背景都应用到body里面，但是也可以用到某一个段落，某一个行内元素。 * 一、颜色 1、 CSS预定义颜色表示法 (就是使用颜色的英文SS预定义颜色表示法(就是使用颜色的英文) 如：color:red; color:blue; 2、RGB颜色表示法 如：color:rgb(255,0,0);color:rgb(0,255,0) RGB颜色表示法就是红(R:red),绿(G:green),蓝(B:blue)， 这三原色混合后呈现出的颜色，其中每种颜色的取值为0~255。 3、十六进制颜色表示法 如：color: #ff0000; color: #00ff00; color:#1199ff 16进制颜色表示法就是使用三对十六进制数分别表示RGB中的三原色,像上面例子的最后一个color:#1199ff;,其中11代表R的颜色(十六进制的11就等于十进制中的17),其中99代表G的颜色(十六进制的99就等于十进制中的153),其中ff代表B的颜色(十六进制的ff就等于十进制中的255),前面再加一个#号.(#1199ff;等价于rgb(17,153,255);) 4、短十六进制颜色表示法 （属于