二、一些特殊效果:
1、cursor:
设置DIV
上光标的样式。
2、clip:
设置剪辑矩形。
例:
<
div
style
="font:16px 宋
体;width:600px;height:200px; cursor:help; clip:rect(0px 100px 20px 0px); line-height:20px; overflow:auto;background-color:Yellow;position:absolute"
>
div样式测式how areyou.
</
div
>
说明:clip:rect(top right bottom left);
设置上下左右的距离,
但此时要把position
指定为absolute
。看以上效果。
3、filter:
滤镜效果。
例:
<
div
style
="width:450px;height:200px;background-color:Blue;"
>
<
div
id
=”tdiv”
style
="background-color:Yellow; filter:alpha(opacity=50);opacity:0.5;
float:left; width:200px;height:200px;"
>
</
div
>
<
div
style
="background-color:Yellow; width:200px;height:200px;float:left;"
>
</
div
>
</
div
>
说明:设置透明度:opacity
:value (FF
专用,value
的取值为0
至1
之间的小数)
,filter:alpha(opacity=value)(IE
专用,value
取值:0
至100)
。
如果要有JavaScript
改变DIV
的透明度可用下面的方法:
FF
中:document.getElementById('tdiv').style.opacity='0.9';
IE
中:document.getElementById('tdiv').style.filter='alpha(opacity=90)';
*
以下是滤镜综合的例子,将以下代码复制到一个网页文件中就可看到其效果,所以就不要加以说明了。
例:
<
style
type
="text/css"
>
#paneldiv div
{
background-Color
:
yellow
;
height
:
200px
;
width
:
200px
;
}
</
style
>
<
div
id
="paneldiv"
style
="width:230px;height:2300px;
background-color:Blue;"
>
<
div
style
="filter:alpha(opacity=0,finishopacity=80,style=1,
startx=10,starty=10,FinishX=100, FinishY=100);opacity:0.5;"
>
alpha效果:
<
br
/>
</
div
>
<
div
style
="filter:blur(add=1,direction=100,strength=5);"
>
blur效果:
<
br
/>
add为1代表字有阴影,0代表字全部模糊。
abcdefghijklmnopqrstuvwxyz
</
div
>
<
div
style
="filter:chroma(color='#ff0000')"
onclick
="this.style.backgroundColor='#ff0000'"
ondblclick
="this.style.backgroundColor='black';"
>
chroma效果:
<
br
/>
原为黄色,单击变成红色变成透明,双击变成黑色。
</
div
>
<
div
style
="filter:FlipH;"
>
fliph效果:
<
br
/>
ABCDEFGH
<
br
/>
IJKLMNOP
<
br
/>
此属性在设置宽高后有效
</
div
>
<
div
style
="filter:FlipV;"
>
flipv效果:
<
br
/>
ABCDEFGH
<
br
/>
IJKLMNOP
<
br
/>
此属性在设置宽高后有效
</
div
>
<
div
style
="filter:gray;"
>
gray效果:
<
br
/>
abcdefghijklmn
</
div
>
<
div
style
="filter:invert; text-transform:uppercase;color:Red;"
>
invert效果:
<
br
/>
背景色变成相反颜色,如黑变成白。
</
div
>
<
div
style
="filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)"
>
wave效果:
<
br
/>
Add:一般为1,或0。(0表示上下波浪)
Freq:变形值。(指定多少个波浪)
LightStrength:变形百分比。(变形后的阴影。)
Phase:角度变形百分比。(弯曲的角度) Strength:变形强度。(数值越大,DIV变形就越大。)
</
div
>
<
div
style
="filter:Xray"
>
xray效果:
<
br
/>
sfasdfasdfasdfsadf
</
div
>
<
div
style
="filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#ffffff');"
>
progid:dximagetransform.microsoft.gradient效果:
<
br
/>
endendendendendendendendendend
</
div
>
</
div
>
<
div
style
="filter:DropShadow(color='#666666',OffX='3',OffY='3',
Positive='1');width:200px;height:200px;"
>
dropshadow效果:
<
br
/>
此效果只有在不设置背景色时有效,这时Color指定的将成为背景色。此时背上的字将是清晰的。positive为0时color将成为背景色,为1时color只是文本投影的颜色。
</
div
>
<
div
style
="filter:Glow(color='#0000ff',strength='3');
width:100px;height:100px;"
>
glow效果:
<
br
/>
strength的光的强度0--100;此时不能设DIV的背景色。
</
div
>
<
div
style
="filter:mask(color='ff0000'); width:100px;
height:100px;text-transform:uppercase;color:black; "
>
mask效果:
<
br
/>
没有明显效果,不能设背景色。
</
div
>
<
div
style
="filter:shadow(color='0000ff',direction='100');
width:100px;height:100px;"
>
shadow效果:
<
br
/>
abcdefghijklmn
</
div
>
<
div
style
="filter:Xray;width:100px;height:100px;
background-color:red;"
>
xray效果:
<
br
/>
sfasdfasdfasdfsadf
</
div
>
<
div
style
="filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=100, StartColorStr='#B5CCFA', EndColorStr='#ffffff');width:100px;height:100px;"
>
渐变效果。
endendendendendendendendendend
</
div
>
<
div
style
="filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=5);width:100px;height:100px;"
>
lsksalsslalalalalalalal
</
div
>
<
div
style
="filter:alpha(opacity=100, finishOpacity=0,style=2);
width:100px; height:100px;background-color:Yellow;"
>
</
div
>
此上滤镜效果主要参考:
http://www.lao8.org/html/8/2008-1-21/2008121182204.html
http://ce.sysu.edu.cn/hope/Education/ShowArticle.asp?ArticleID=2117
;
(转自: http://www.cnblogs.com/skylaugh/archive/2009/05/09/1453124.html)
分享到:
相关推荐
《精通CSS+DIV网页样式与布局》系统地讲解了CSS层叠样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析;着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,...
Div+CSS网站设计的优点 。
这里我就简单的说一下这个小模板,上面的一些是广泛的定义一个网页的整体的样式,因为现如今的浏览器的种类可以说是及其繁多,大多数都各自为政,都以自己的浏览器为标准,这样一来就苦了战斗在web编程最前沿的开发...
DIV+CSS网页样式与布局实例,通过不同章节的代码示例展示如何通过DIV+CSS布局网页
div+css布局页面的使用经验总结,包括div设置,css样式表修饰div块进行页面的布局等等。
Div中常用样式的属性,如设置距离顶部啊,这些常用的属性,在这里总结了一下,希望对大家有用
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的。即要求滚轮滚动到指定的位置。先看下基本的解决方案。 1.给链接a加个#的方式来实现跳转。(锚点方法)这里直接贴下代码: <div id=container> <a>...
《精通CSS+DIV网页样式与布局》系统地讲解了CSS层叠样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析;着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,...
《精通CSS+DIV网页样式与布局》系统地讲解了CSS层叠样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析;着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,...
在聊天的场景中,聊天内容需要用到气泡修饰,如下图。下面一一讲解。 一、图片式: 第一个样式是京东客服,气泡的圆角和钩子... <div u00a0class=header_img jimi3 fl></div> cellspacing u00a0cellpadding=0>
XHTML 下css+div布局总结..................................................................................................................... 6 网页设计 DIV+CSS 第1 天:选择什么样的DOCTYPE ...............
XHTML 下css+div 布局总结....................... 6 网页设计DIV+CSS——第1 天:选择什么样的DOCTYPE ....... 9 第一天............. 9 什么是DOCTY 4.群选择器.... 14 5.派生选择器 14 6.id 选择器... 14 6.类别...
在样式布局中,我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;,而对div等块级元素,只需要设置其left和right的margin值为auto。要实现元素的...
命名方式遵循“驼峰式大小写(标志符由多个单词组成 除首词首字母小写外 其余单词首字母均大写)” 2:避免滥用类 当类型的结构需要不一样的表现时 记得什么是层叠样式表 具体结构中的p a h1等可使用如下方式:div....
应用应用DIV CSS编码时很容易犯一些错误。本文列举了一些常见的错误: 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。...
很多新手在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示。如果div有固定宽度的话,用padding,margin都很容易实现。方法有很多种。不过经常遇到这种div...
样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取。 让元素移动到200停止 setTimeout ( function () { var div = ...
对于CSS样式中的各式各样的属性进行了系统的描述和总结,使一个不错的开发辅助手册。
query常用方法总结: $("标签名") //取html元素 document.getElementsByTagName("") $("#ID") //取单个控件document.getElementById("") $("div #ID") //取某个控件中 控件 $("#ID #ID") // 通过控件ID取其中的控件 ...
人们在标签使用中最常见到的错误之一就是随意将HTML5的等价于<div>——具体地说,就是直接用作替代品(用于样式)。在XHTML或者HTML4中,我们常看到这样的代码: <!-- HTML 4-style code --> <div id="wrapper"> ...