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

参考代码：

 <!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. shell 13文件包含

    同其他语言一样,shell也可以包含外部脚本.执行引用脚本可以使用source或 . 示例1 test.sh #shell #!/bin/sh echo "test.sh开始执行" ...

  2. JVM的DirectMemory设置

    转载http://blog.csdn.net/zshake/article/details/46785469 几台服务器的JVM占用内存总是持续增长,大大超过-Xmx设定的值,服务器物理内存几乎被耗尽 ...

  3. Windows 应用程序交互过程

     应用程序 Windows的应用程序一般包含窗口(Window),它主要为用户提供一种可视化的交互方式(窗口是由线程(Thread)创建的).Windows 系统通过消息机制来让系统和用户进行交互 ...

  4. Spark学习笔记5：Spark集群架构

    Spark的一大好处就是可以通过增加机器数量并使用集群模式运行,来扩展计算能力.Spark可以在各种各样的集群管理器(Hadoop YARN , Apache Mesos , 还有Spark自带的独立 ...

  5. Vue 路由配置、动态路由

    1.安装 npm install vue-router --save / cnpm install vue-router --save 2.引入并 Vue.use(VueRouter) (main.j ...

  6. HADOOP与HDFS数据压缩格式

    1.cloudera 数据压缩的一般准则 一般准则 是否压缩数据以及使用何种压缩格式对性能具有重要的影响.在数据压缩上,需要考虑的最重要的两个方面是 MapReduce 作业和存储在 HBase 中的 ...

  7. nginx技术分享 (转)

    原文地址:http://blog.csdn.net/nethibernate/article/details/6628267 Nginx的作用: HTTP Server 反向代理,用于将用户的请求转发 ...

  8. 洛谷 P1197 [JSOI2008]星球大战

    题目描述 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过特殊的以太隧道 ...

  9. Django的DRF序列化方法

    安装rest_framework -- pip install djangorestframework -- 注册rest_framework序列化 -- Python--json -- 第一版 用v ...

  10. 杂： PYTHON上数据储存：推荐h5py

    一篇很短的小短文,主要推荐下做科学计算是大量数据的储存问题 最近在做一个CNN的项目,文件夹里有20w张图片要读入并保存到一个data文件(不然每次都读20w文件太麻烦). 折腾了一个下午,发现了一个 ...