CSS属性

本文介绍了CSS中边框样式的多种设置方法及其显示效果,并详细列举了DIV元素实现不同透明效果的具体代码示例。

 以下是对CSS中各种属性的功能收集

 

border-style   :   none   |   hidden   |   dotted   |   dashed   |   solid   |   double   |   groove   |   ridge   |   inset   |   outset    
     
  参数:    
     
  none   :    无边框。与任何指定的border-width值无关    
  hidden   :    隐藏边框。IE不支持    
  dotted   :    在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线    
  dashed   :    在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线    
  solid   :    实线边框    
  double   :    双线边框。两条单线与其间隔的和等于指定的border-width值    
  groove   :    根据border-color的值画3D凹槽    
  ridge   :    根据border-color的值画菱形边框    
  inset   :    根据border-color的值画3D凹边    
  outset   :    根据border-color的值画3D凸边

 

 

DIV透明度

  • 黑白照片 filter: gray;
  • X光照片 filter: Xray;
  • 风动模糊 filter: blur(add=true,direction=45,strength=30);
  • 正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
  • 半透明效果 filter: Alpha(Opacity=50);
  • 线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
  • 放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
  • 白色透明 filter: Chroma(Color=#FFFFFF);
  • 降低色彩 filter: grays;
  • 底片效果 filter: invert;
  • 左右翻转 filter: fliph;
  • 垂直翻转 filter: flipv;
  • 投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
  • 马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
  • 发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
  • 柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2

       eg.

             var f123=document.getElementById('layer1');
             f123.sytle.filter='alpha(opacity:80)';

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值