div style常用属性介绍及使用示例

2020-05-09 06:57:14易采站长站整理

<div style=”filter:FlipV;”>
flipv效果:

ABCDEFGH

IJKLMNOP

此属性在设置宽高后有效
</div>
<div style=”filter:gray;”>
gray效果:

abcdefghijklmn
</div>
<div style=”filter:invert; text-transform:uppercase;color:Red;”>
invert效果:

背景色变成相反颜色,如黑变成白。
</div>
<div style=”filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)”>
wave效果:

Add:一般为1,或0。(0表示上下波浪)
   Freq:变形值。(指定多少个波浪)
   LightStrength:变形百分比。(变形后的阴影。)
   Phase:角度变形百分比。(弯曲的角度) Strength:变形强度。(数值越大,DIV变形就越大。)
</div>
<div style=”filter:Xray”>
xray效果:

sfasdfasdfasdfsadf
</div>
<div style=”filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr=’#B5CCFA’, EndColorStr=’#ffffff’);”>
progid:dximagetransform.microsoft.gradient效果:

endendendendendendendendendend
</div>
</div>
<div style=”filter:DropShadow(color=’#666666′,OffX=’3′,OffY=’3′,
Positive=’1′);width:200px;height:200px;”>
dropshadow效果:

此效果只有在不设置背景色时有效,这时Color指定的将成为背景色。此时背上的字将是清晰的。positive为0时color将成为背景色,为1时color只是文本投影的颜色。
</div>
<div style=”filter:Glow(color=’#0000ff’,strength=’3′);
width:100px;height:100px;”>
glow效果:

strength的光的强度0–100;此时不能设DIV的背景色。
</div>
<div style=”filter:mask(color=’ff0000′); width:100px;
height:100px;text-transform:uppercase;color:black; “>
mask效果:

没有明显效果,不能设背景色。
</div>
<div style=”filter:shadow(color=’0000ff’,direction=’100′);
width:100px;height:100px;”>
shadow效果:

abcdefghijklmn
</div>
<div style=”filter:Xray;width:100px;height:100px;
background-color:red;”>
xray效果:

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