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

参考代码：

 <!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. java study1

    java安装 java优势-跨平台:一次编写,到处运行. jdk开发工具包,提供了开发人员需要的开发工具.jdk中包含了jre jre java的运行环境,负责程序的运行,jre中,包含程序运行时需要 ...

  2. springMVC 是单例还是的多例的？

    曾经面试的时候有面试官问我spring的controller是单例还是多例,结果我傻逼的回答当然是多例,要不然controller类中的非静态变量如何保证是线程安全的,这样想起似乎是对的,但是不知道( ...

  3. ExtJS的数据模型

    给大家介绍一下ExtJS的组件模型. 常见的Ajax的开发流程: 1.定义URL,metod,params 2.开发后台  接收JSON/XML数据 返回JSON/XML数据 3.前台回调 4.显示到 ...

  4. 解决npm下载包失败的问题

    在我朝,用npm直接从官方的镜像下载包,经常会出现网络超时下载失败的问题,具体原因大家都懂,我就不说了. 不过,这些都无法阻挡我们对知识的渴望,一下提供几种我在工作中的解决办法,希望能帮助你. 1.安 ...

  5. solr联合多个字段进行检索(multivalued和copyfield的使用)

    在实际工作中不仅仅对索引中的单个字段进行搜索.需要进行综合查询. 比如book表中有id,name(标题),price,summary(摘要),content(内容),我们要找一本书的时候,查询关键字 ...

  6. java中key-value数据有重复KEY如何存储

    http://www.iteye.com/problems/87219 Map<Key, List<Value>>, 这个好 师兄厉害,给介绍了个神器:guava

  7. PHP Token(令牌)设计 避免重复提交

    设计目标: 避免重复提交数据. 检查来路,是否是外部提交 匹配要执行的动作(如果有多个逻辑在同一个页面实现,比如新增,删除,修改放到一个PHP文件里操作) 这里所说的token是在页面显示的时候,写到 ...

  8. 黑盒测试用例设计——PICT(QQ实践)

     以QQ的状态设置来做一次实践.QQ用户可以对如下的状态方面的设置.后两张图是登录后的状态的可选项和鼠标键盘无动作后将状态切换至的可选项.默认的自动回复有三种,默认的快捷回复有四种.对于自动回复和快捷 ...

  9. maven下载与配置

    转自:https://www.cnblogs.com/jdys/p/3770534.html 1.访问官网:从maven官网下载maven http://maven.apache.org/downlo ...

  10. django 使用 可视化包-Pyechart

    Echarts 是百度开源的一个数据可视化 JS 库,主要用于数据可视化.pyecharts 是一个用于生成 Echarts 图表的类库.实际上就是 Echarts 与 Python 的对接. 本次使 ...