adminn 发表于 2023-10-1 05:57:43

【网页制作】边框7种特效(附代码)

边框特效是给图片加一个相框,一是增加美感,起到衬托的作用,二是分界图片与页面主体界线分明(多用于浮窗效果,本站广告窗就是采用这种方式)

相框的类型:相框的类型有如下几种,附页面html代码
网页制作之简单线框
<IMG style="BORDER-RIGHT: #ffcccc 5px solid; BORDER-TOP: #ffcccc 5px solid; BORDER-LEFT: #ffcccc 5px solid; BORDER-BOTTOM: #ffcccc 5px solid" src=""width="" height="">

网页制作之双线框
<IMG style="BORDER-RIGHT: 7px double; BORDER-TOP: 7px double; BORDER-LEFT: 7px double; BORDER-BOTTOM: 7px double" src=""width="" height="">

网页制作之虚线框
<IMG style="BORDER-RIGHT: #990000 3px dashed; BORDER-TOP: #990000 3px dashed; BORDER-LEFT: #990000 3px dashed; BORDER-BOTTOM: #990000 3px dashed" src=""width="" height="">

网页制作之凸出框  
<IMG style="BORDER-RIGHT: #ccccff 10px outset; BORDER-TOP: #ccccff 10px outset; BORDER-LEFT: #ccccff 10px outset; BORDER-BOTTOM: #ccccff 10px outset"src=""width="" height="">

网页制作之嵌入框
<IMG style="BORDER-RIGHT: #ff9900 15px inset; BORDER-TOP: #ff9900 15px inset; BORDER-LEFT: #ff9900 15px inset; BORDER-BOTTOM: #ff9900 15px inset"src=""width="" height="">

网页制作之脊状框  
<IMG style="BORDER-RIGHT: #33ff66 15px ridge; BORDER-TOP: #33ff66 15px ridge; BORDER-LEFT: #33ff66 15px ridge; BORDER-BOTTOM: #33ff66 15px ridge"src=""width="" height="">

网页制作之凹槽框  
<IMG style="BORDER-RIGHT: #cc6666 15px groove; BORDER-TOP: #cc6666 15px groove; BORDER-LEFT: #cc6666 15px groove; BORDER-BOTTOM: #cc6666 15px groove"src=""width="" height="">

本文撰稿:汇三汇阀泵【汇三汇.中国】
转载请保留链接,发布转载帖子可以获得收益。
Please keep the link for reprinting, and you can get benefits from publishing reprinted posts.

页: [1]
查看完整版本: 【网页制作】边框7种特效(附代码)