个人在做网页或者写博的时候，有时希望对图片做一些修饰处理，比如，高光，圆角，阴影等。当然，我们可以使用图像处理软件。但是这样做有2点不好，一是需要额外PS等步骤，二是破坏了原始图像 
。网上已经有很多利用css的方法来动态处理图片，但是css的方法需要额外在图片外部套一个到两个div标记来实现阴影的偏移效果，这里要介绍的是一种使用js的方法，非常简单，只需两步：
1.去Glossy.js主页下载一个javascript文件，在需要显示图片的html文件<head>部分加一句：
<script type="text/javascript" src="glossy.js“></script>
2.在需要修饰的图片<img> 标记中简单的加一个class=”glossy”就可以完成阴影，高光，圆角等一系列效果。
下面的官方demo中，5个GIF原图，都是不带圆角，倒角，高光，阴影的。
在每个<img> 标记中加一个class=”glossy”，实现下图中的修饰效果。
这样子做法的好处是，如果将来不想使用修饰效果了，原图还是保留着未修改的样子。
有关详细的用法可以去Glossy.js主页查阅，圆角大小，有无阴影，以及高光的渐变色都是可以定制的。
我个人打算研究研究，怎么把这个功能整合到一个wp的插件中 
，后台有选项可以选择图片的效果，并在主页全文输出时用filter的方式替换<img>达到效果。
下载地址：
glossy.zip （73.49 KB）
站长工具
相关文章
请稍等，评论加载中...