<style>
.max{width:XX%height:auto}/* 根据自己的需要去自行设置 */
.min{width:XXpxheight:auto}/* 根据自己的需要去自行设置 */
<style>
<html>
<body>
<img id='img' class='min' src='xxxx'>
</body>
</html>
<script>
$('#img').click(function(){
$(this).toggleClass('min')
$(this).toggleClass('max')
})
</script>
常用CSS特效文字代码http://lzjwql814.blog.163.com/blog/static/19458236200753065414317/
图片的CSS滤镜效果 ---透明
http://lzjwql814.blog.163.com/blog/static/19458236200753071133712/
图片CSS滤镜效果---灰度
http://lzjwql814.blog.163.com/blog/static/19458236200753071153596/
图片CSS滤镜---X光效果
http://lzjwql814.blog.163.com/blog/static/19458236200753071244200/
图片CSS滤镜---发光效果
http://lzjwql814.blog.163.com/blog/static/19458236200753071739406/
图片CSS滤镜---阴影效果
http://lzjwql814.blog.163.com/blog/static/19458236200753071959407/
图片CSS滤镜---色彩对换效果代码
http://lzjwql814.blog.163.com/blog/static/19458236200753072049672/
图片CSS滤镜---附阴影效果
http://lzjwql814.blog.163.com/blog/static/194582362007530721554/
图片CSS滤镜---波形效果代码
http://lzjwql814.blog.163.com/blog/static/19458236200753072215358/
图片CSS滤镜---波形加上半透明合成效果代码
http://lzjwql814.blog.163.com/blog/static/1945823620075307231444/
图片CSS滤镜---图片模糊效果代码
http://lzjwql814.blog.163.com/blog/static/19458236200753072344113/
让图片产生梦幻效果的代码
http://lzjwql814.blog.163.com/blog/static/19458236200753071556557/
颜色代码表
http://lzjwql814.blog.163.com/blog/static/19458236200753065349150/
多种彩色闪动字代码及效果
http://lzjwql814.blog.163.com/blog/static/19458236200753064955197/
校对、修改并验证后的文字特效代码
http://lzjwql814.blog.163.com/blog/static/1945823620075306515604/
动画代码和透明flash动画网址
http://lzjwql814.blog.163.com/blog/static/19458236200752953118575/
透明flash动画巧搭配并添加漂亮背景
http://lzjwql814.blog.163.com/blog/static/19458236200753064333413/
动画代码中隐藏着一个天大的秘密
http://lzjwql814.blog.163.com/blog/static/19458236200753065138297/
图片移动效果的欣赏与制作
http://lzjwql814.blog.163.com/blog/static/19458236200753064457129/
顾名思义，就是元素外面的一圈边框，下图中虚线圈起的部分是内容，外面橙色的一圈是它的边框，可以理解成在照片外面加一个相框，使用border属性。
边框样式border-style必须写！否则其它属性全部失效。
边框的样式：
border后面可跟多个值，中间用空格分离，含义如下：
注意顺序， 边框样式不可省略 ，颜色和宽度可以省略，会显示默认的效果。
——以上规律在padding和margin一样适用。
边框样式border-style必须设置
如果我们的四条边框属性都是一样的，那么统一设置就可以啦，注意边框类型不可省略。
首先我们放置一个宽高为200px的粉色盒子。
接下来我们为它加上一条宽度为10px，样式为实线，颜色为红色的边框。
我们可以看到，添加边框的时候，是在盒子外面套一圈边框，而不是加在里面，在Chrome浏览器中点击右键检查，可以看到div的大小变成了220x220。
套在外面的边框的宽度是会加进盒子尺寸的（上下左右各增加了10px），如果我们想盒子保持大小不变，要对div本身的width和height进行减小，在这个样例中，通过计算可得，减少到180px即可保持大小不变。
当我们使用点状、虚线等边框样式时，多出来的缝隙，会使用元素本身的 背景颜色 填充。
点和虚线的具体样式，不同浏览器中可能会不一样。
我们为刚刚的盒子设置上边框为红色，左边框为绿色，效果如下图所示：
我们会发现在两条边框交界处的小方块，通过一条对角线分隔，上边框和左边框各占一半。当边框不一样宽时，同样也是用对角线把交界处的小长方形一分为二，如下图所示：
当被添加边框的元素宽度为0，不设置高度（高度默认是0）的情况下，我们可以巧妙利用 边框组合 和 transparent（透明） 绘制三角形，可以体验下哦。
三角形1-css：
三角形2-css：
多彩三角形-css：
绘制梯形只要对应添加宽度或者高度就可以啦
梯形1-css：
梯形2-css：
