当我发觉为图片外框添加阴影效果挺美观的。于是我也开始捣鼓给自己的博客添加图片阴影效果。用Chrome查看人家博客的CSS样式,发觉img
中多了shadowbox这一项,然后自己直接复制过去,发觉没用。只能放狗一搜了,原来用了JS插件。查了一些资料,比较杂,真正对自己有用的是这货shadowbox.js。下载主页提供的文件包后,解压,发觉不止有shadowbox.js
文件,还多了shadowbox.css
样式文件,有点莫名其妙,之前我用audio.js
时是没有css样式的。本小子没管那么多,直接把shadowbox.css
放在css文件夹里,shadowbox.js
放在js文件夹下。按照Shadowbox.js主页使用说明:
The simplest way to set up Shadowbox is to include the JavaScript and CSS files in the <head> of your document (web page) and then call Shadowbox.init, like this:
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
在自己博客的default.html
文件<head>
标签之间采用上面的代码进行初始化,具体如下:
<link rel="stylesheet" type="text/css" href="/public/css/shadowbox.css">
<script type="text/javascript" src="/public/js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
修改完后,还要添加css样式。说到这,不得不提一下两个非常有用的网址:Box-shadow, one of CSS3′s best new features和BOX SHADOW。前者对于理解shadowbox的参数设置非常有帮助,后者则是一个在线shadowbox阴影效果生成器,可视化,非常的方便。
在main.css
的img
添加了如下的阴影效果代码:
-webkit-box-shadow: 1px 4px 16px 8px #5CA2BE;
-moz-box-shadow: 1px 4px 16px 8px #5CA2BE;
box-shadow: 1px 4px 16px 8px #5CA2BE;
添加完后push到github上面,发觉阴影效果有了,但图片上面的字与下面图片的间距挨得太近了,放狗一搜,发觉margin:20px auto;
似乎有用,测试了一下,果然有用,将它添加进样式里,就可以看见现在博文里图片的阴影效果了,over。