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

参考代码：

 <!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. [转][C#]验证

    文件下载 本文仅做备份,参考自:http://www.cnblogs.com/LoveJenny/p/opensource_software_license_tool__easyhelper_easy ...

  2. Spark SQL 编程

    Spark SQL的依赖 Spark SQL的入口:SQLContext 官方网站参考 https://spark.apache.org/docs/1.6.2/sql-programming-guid ...

  3. jps命令发生异常

    当在集群里输入jps命令时报如下错误: 我就开始检查jdk,感觉应该是centos自动的jdk没卸载干净跟后面安装的jdk冲突 先通过命令 rpm -qa|grep java 查看jdk信息 把这几个 ...

  4. python内置函数详细介绍

    知识内容: 1.python内置函数简介 2.python内置函数详细介绍 一.python内置函数简介 python中有很多内置函数,实现了一些基本功能,内置函数的官方介绍文档:    https: ...

  5. Python常量工具类

    1.定义常量类constant.py # -*- coding: utf-8 -* """常量工具类 author: Jill usage: from constant ...

  6. 0_Simple__simpleMPI

    MPI 的简单使用 ▶ 源代码.主机根结点生成随机数组,发布副本到各结点(例子用孩子使用了一个结点),分别使用 GPU 求平方根并求和,然后根结点使用 MPI 回收各节点的计算结果,规约求和后除以数组 ...

  7. 25. instr用法

    很多时候,我们要进行字符串匹配,在SQL语句中,我们通常使用like来达到我们搜索的目标.但经过实际测试发现,like的效率与instr函数差别相当大.下面是一些测试结果: select instr( ...

  8. eclipse模板

    文件(Files)注释标签: /** * @Title: ${file_name} * @Package ${package_name} * @Description: ${todo}(用一句话描述该 ...

  9. mock——test　基本所有使用

    可以参考:http://www.cnblogs.com/lyy-2016/p/6122144.html test /** * */ package com.imooc.web.controller; ...

  10. Mysql 主键常用修改

    修改表的定增长初始值: ALTER TABLE 表名 AUTO_INCREMENT=值;