简单实用的图片边框效果

图片的边框可以随鼠标动作（hover）改变样式，而且边框跟图片需要有一定距离——很简单的效果，却被一个莫名其妙的问题困扰了好几天，经典论坛上的hutia朋友给出的解决方法是加上padding:6px;俺后来查看cssvault.com的CSS发现将图片“浮动（float）”起来也可以避免这个问题。

查看示例

XHTML：

<a class="imgborder" href="#">
<img src="smalltransport.png" alt="smalltransport" width="200" height="150" />
</a>

CSS：

img { border:0; }.imgborder, a.imgborder {  float: right;  border: 5px solid #F1F1F1;  background: #FFF;  padding: 4px;  margin:0px;} a.imgborder:hover {border: 5px solid #7ABBEB;}

简单实用的图片边框效果相关推荐

html怎么做出相框的效果,使用CSS3制作PS级的图片边框效果
当一个开发者需要制作图片边框效果时通常有两种选择:一是使用Photoshop来制作,二是在通过CSS来渲染"盒中盒"的效果.在这个教程中,我们要制作一种带复杂边框的相框效果,通过 ...
html简单图片放大镜,jQuery轻量级简单实用的图片放大镜特效
zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件.这个图片放大镜特效在鼠标滑过骨牌的时候,在原来图片区域内部将图片放大.鼠标进入和离开图片区域时都带有淡入淡出的效果.该图片放大镜插 ...
java border边框_简单实用的css边框属性border
本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式. 预备知识 border相关属性 border-width 边框的宽度 border-style 边框的样式 borde ...
php图片转换软件,能能图片格式转换器支持主流图片格式批量转换,简单实用的图片转换软件...
今天给大家分享一个我平常用的能能图片格式转换器,这个能能图片格式转换器也是非常强大,集合所有图片格式,支持相互转换哦,能能图片格式转换器还有图片剪切,调整分辨率,添加水印等功能.在这里也推荐大家看一下 ...
如何快速处理图片？超简单实用的图片处理工具推荐
相信大家在平时的工作中都碰到过需要处理图片的情况,例如图片上有一些有瑕疵的边边角角需要去掉.图片背景不好看需要给图片抠图后换个背景等等,这些图片处理时一般需要借助一些专业的图片处理工具或者需要一定的专 ...
编程练习--简单实用的选项卡切换效果
有网友私信我,说我前几篇写编程练习的例子让他们感觉我写代码的方式和他们不一样,让他们很受启发,希望我多写一些这样的例子.他们帮我总结了一下,主要表现在以下三个方面: 1. 代码外观整洁清爽. 2.喜欢 ...
JS简单实现京东图片放大镜效果
效果图: 素材: 大图: 小图: 代码思路: 详见代码注释JS部分代码: <!DOCTYPE html> <html lang="en"><head ...
图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性
3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出backgro ...
图片动画效果html5,8个实用炫酷的HTML5图片动画应用
原标题:8个实用炫酷的HTML5图片动画应用近期我们发布了不少关于HTML5和jQuery的图片动画应用,很多都比较实用,也有一些效果非常炫酷,比如一些HTML5 3D图片动画特效.本文精选了8个实 ...

简单实用的图片边框效果

简单实用的图片边框效果相关推荐

最新文章

热门文章