HTML

图片的宽高一定要定义
 

XML/HTML Code复制内容到剪贴板 <div class="con">           <img src="http://www.zjgsq.com/wp-content/uploads/2014/08/jqueryapi.jpg" width="360px" height="110px">           <div class="border"></div>       </div>  

CSS   

CSS Code复制内容到剪贴板 .con {               margin: 50px;               position: relative;           }           .border {               position: absolute;               top: 0;               left: 0;               rightright: 0;               bottombottom: 0;           }           .con:hover .border {               border: 5px solid #000;           }    


虚线

在css里面添加
CSS Code复制内容到剪贴板

<style>    td {border-bottom:1px dashed #000000;}    </style>  

实线

在css里面添加

CSS Code复制内容到剪贴板 <style>    td {border:1px solid black;}    </style>  

JS

记得先引入jQuery文件
 

JavaScript Code复制内容到剪贴板 $(function () {                var w = $(img).width();                var h = $(img).height();                $(.con).width(w);//设置图片外部包裹层的宽度，也可以直接在CSS里设置                $(.con).height(h);//设置图片外部包裹层的高度，也可以直接在CSS里设置                $(.border).width(w - 10);//设置边框层宽度，这里要减去border宽度并乘以2                $(.border).height(h - 10);//设置边框层高度，这里要减去border宽度并乘以2            });  

    Demo

鼠标悬停图片产生边框的效果实现