实现下面的效果，鼠标滑过图片添加边框图片无位移——鼠标滑过，图片只是加了边框，不会晃动：

参考代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml"><head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 <title></title>

 <style type="text/css">

 a{float:left;}//不可修改

 a:hover {

 width: 182px;//图片减去两边边框的宽度

 height: 302px;//图片减去两边边框的宽度

 border: 4px solid #fff;//边框宽度，可以调整

 overflow: hidden;//不可修改

 }

 a:hover img {

 margin: -4px;//隐藏图片周围部分，对应边框宽度，可以调整

 }

 </style>

 </head>

 <body>

 <div class="T-s-l">

     <a href="">  <img width="190" heigh="310" src="http://img03.taobaocdn.com/imgextra/i3/272205633/T2jd1xXsBXXXXXXXXX-272205633.jpg"> </a>

     <a href="">  <img width="190" heigh="310" src="http://img.taobaocdn.com/bao/uploaded/T1ZVINFXdaXXb1upjX.jpg"> </a>

     <a href="">  <img width="190" heigh="310" src="http://img.taobaocdn.com/bao/uploaded/T1XJYQFXJcXXb1upjX.jpg"> </a>

     <a href="">  <img width="190" heigh="310" src="http://img01.taobaocdn.com/imgextra/i1/122343103/T2YqFsXuxaXXXXXXXX-122343103.jpg"> </a>

 </div>

 </body></html>

鼠标滑过图片添加边框图片无位移[xyytit]的更多相关文章

  1. android图像处理系列之四－－ 给图片添加边框（上）

    图片处理时,有时需要为图片加一些边框,下面介绍一种为图片添加简单边框的方法. 基本思路是:将边框图片裁剪成八张小图片(图片大小最好一致,不然后面处理会很麻烦),分别对应左上角,左边,左下角,下边,右下 ...

  2. android图像处理系列之四－－给图片添加边框（上）

    图片处理时,有时需要为图片加一些边框,下面介绍一种为图片添加简单边框的方法. 基本思路是:将边框图片裁剪成八张小图片(图片大小最好一致,不然后面处理会很麻烦),分别对应左上角,左边,左下角,下边,右下 ...

  3. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  4. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  5. 使用CSS为图片添加边框的几种方法

    css的应用十分广泛,即便用在图片的效果中也是方法多样,本文下面就介绍五种为图片添加特殊效果边框的CSS写法阴影效果 通过使用带有一些padding之的背景图来添加阴影效果. HTML <img ...

  6. android图像处理系列之六－－ 给图片添加边框（下）－图片叠加

    前面介绍了一种用透明图片叠加的方式添加花边边框,下面将介绍另外一种图片叠加添加花边边框的方式.前面方法有一个缺点,就是做成PNG图片,图片体积会很大,不是一般的大,比同样的JPG大三倍多,如果项目可以 ...

  7. android图像处理系列之五－－ 给图片添加边框（中）

    前面一篇讲到给图片加边框的方式,只能给图片加一些有规则的边框,如果想加一些比较精美的效果,就有点麻烦了.下面就给出解决这个问题的思路. 思路是:一些比较精美的花边图片我们是很难用代码控制,就目前本人水 ...

  8. android图像处理系列之六－－给图片添加边框（下）－图片叠加

    前面介绍了一种用透明图片叠加的方式添加花边边框,下面将介绍另外一种图片叠加添加花边边框的方式.前面方法有一个缺点,就是做成PNG图片,图片体积会很大,不是一般的大,比同样的JPG大三倍多,如果项目可以 ...

  9. android图像处理系列之五－－给图片添加边框（中）

    前面一篇讲到给图片加边框的方式,只能给图片加一些有规则的边框,如果想加一些比较精美的效果,就有点麻烦了.下面就给出解决这个问题的思路. 思路是:一些比较精美的花边图片我们是很难用代码控制,就目前本人水 ...

随机推荐

  1. MTR追踪的好工具

    yum install mtr 或者win下的winmtr 直接可以统计.

  2. CentOS修改TimeZone

    查看: date -R +0800   修改: sudo rm -rf /etc/localtime sudo cp /usr/share/zoneinfo/America/Los_Angeles / ...

  3. [CoentOS] MySQL删除和安装

    删除 MySQL yum remove mysql mysql-server mysql-libs mysql-server; find / -name mysql 将找到的相关东西delete掉(r ...

  4. 微擎框架小程序 uitl

    获取用户信息 util.getUserInfo(callback) 获取成功后会将用户信息写入到缓存中,如果指定了回调函数,则会调用回调函数 callback 获取成功后的回调函数 示例 var ap ...

  5. Hbase简介安装配置

    HBase —— Hadoop Database的简称 ,hbase 是分布式,稀疏的,持久化的,多维有序映射,它基于行键rowkey,列键column key,时间戳timestamp建立索引.它是 ...

  6. 修改IP

    查看系统版本 [root@host ~]# cat /etc/issueCentOS release 6.5 (Final)Kernel \r on an \m [root@host ~]# cat ...

  7. controller检查header

    以前都只能拿到request再检查,其实有相应的注解. public Result updateRecentScore(@RequestBody Map map, @RequestHeader(&qu ...

  8. ABAP-年月期间搜索帮助

    selection-screen begin of block block1 with frame title text-. parameters:p_mon1 like s031-spmon, p_ ...

  9. PL/SQL Developer安装教程以及汉化包安装教程

    一.安装PL/SQL 1.百度下载plsql破解版软件,官网只能使用30天 2.双击plsqldev906.exe进行安装,点击 iagree 3.默认是安装在c盘,可以根据自己需要更改安装目录 4. ...

  10. 编写ios和android共用的c/c++库时 使用iconv的问题(转)

    因为在项目中需要同时维护ios和Android,不同的代码不利于开发的便捷和以后的维护,所以在最近的一个项目中,两种手机应用的通信部分打算使用c/c++库来统一编写,ios调用.a静态库,androi ...