分享

14调用CSS语句修饰图片边框

 夏春清风 2010-06-10

  CSS样式表有非常强大的功能,调用CSS语句的各种滤镜属性和属值修饰图片边框,或编辑音画贴边框,可以得到精采的效果.先看两种贴图标签的不同效果.

  (1)HTML贴图标签代码如下:
<INPUT src="http://bbs./UploadFile/2008-6/20086111653319630.jpg"type=image width=350 style="border:16px #0000ff double">

显示结果:


 


  (2)套用样式表语句的HTML贴图代码如下:

<INPUT src="http://bbs./UploadFile/2008-6/20086111653319630.jpg"type=image width=350 style="border:25px #2828FF double">
  ◆style=套用CSS标记.
  ◆border:25px #2828FF double 双线边框语句,宽25点,蓝色.

显示结果(图片有蓝色双线边框):


 


  (1)粒状阴影边框实例代码:



显示结果:


 


   (2)邮票边框实例代码:



显示结果:


 


 (3)图片圆形羽化实例代码:



  ◆圆形羽化的属性与参数是tyle="FILTER: alpha(opacity=100,style=2)".
  ◆如果须要矩形羽化,把羽化属性与参数改为style=3,即可.


圆形羽化图片显示结果:



 


(4)图片左右颠倒实例代码:



◆filter:fliph (向右)
◆fliph:filter (向左)


显示结果:



 


 (5)立体阴影框实例代码:


显示结果:



 


 (5)图片加短矩形边框实例代码:


显示结果:



 


 (6)图片加立体边框实例代码:


显示结果:



 


击点打开html代码浏览器

  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编

(为了让更多网友学用html代码制作音画贴,本贴欢迎转载.但是.我用了很多时间和精力编写这些资料的,转载时请注意网络上的荣辱公德不要把原创编辑游子的名字改掉。谢谢!)





23种CSS图片修饰效果演示


1。单线框



2。双线框



3。凸出框



4。凹进框



5。邮票框



6。虚线框



7。凹槽框



8。脊状框



9。立体阴影框



10。阴影框



11。横向渐变透明



12。圆形渐变透明



13。X形渐变透明



14。改变某种颜色



15。黑白效果



16。X光效果(底片)



17。浮雕效果



18。上下颠倒



19。左右颠倒



20。色彩颠倒



21。粒状阴影



22。模糊效果



23。水波效果(风吹)





23种CSS图片修饰效果代码:



    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约