用CSS做图片阴影

November 18, 2005 at 11:48 pm · Filed under 电子网络 · Visited 4859 time(s)

在Oui-Blog看到这个时觉得不错。可免去平时加框的麻烦。

我用的是A List Apart的这段代码：

(X)HTML codes:
<div class="shadow"><div><a href="http://google.com/search?q=cat+floor" title="Google search: cat floor"><img src="catfloor.jpg" alt="Cat on floor" /></a></div></div>

CSS codes:
.shadow {
float: left;
width: auto;
background: url(fuzzy_shadow.png) no-repeat bottom right;
}

.shadow div {
background: url(fuzzy_shadow1.png) no-repeat right top;
}

.shadow div a {
background: url(fuzzy_shadow2.png) no-repeat left bottom;
padding: 0 6px 6px 0;
display: block;
}

.shadow img {
background-color: #fff;
color: #000;
border: 1px solid #999;
padding: 4px;
vertical-align: bottom;
}

效果如下：

CSSshadows

6 Comments »

  1. kano said,

    November 19, 2005 @ 6:15 pm

    这样的代码太复杂了吧？

    嗬嗬，我的tt自带水印功能，不过我从来没用过，批量加框也不麻烦，反正我的相册也还是需要加框的，并不只是blog用图片
    ————
    Re kano by tail
    这个代码只是初看时复杂。用时，在改模板时把两个COPY到html和css中。
    平时写日志直接用上quicktag只需要点一下。好象平时点下”b”加粗体一样。
    你的TT带水印是什么样的？在你那介绍下。 :)

  2. J said,

    November 20, 2005 @ 6:36 pm

    这个我有用，先去研究一下。谢谢了！

  3. kano said,

    November 21, 2005 @ 2:31 am

    我那个只要把水印.png做好上传就可以了，然后所有在blog里面上传的图片自动加印
    ————
    Re kano by tail
    懂了，和CSS加框一样。只是把PNG加到了图片的上面，也许以后我也可以用上。。谢谢。

  4. anli said,

    April 12, 2006 @ 8:03 pm

    这个刚好用到!谢了!
    ————
    Re anli by tail
    :0

  5. public.js said,

    May 14, 2008 @ 6:24 am

    做的很好,我已经用上了,谢了

  6. Breeze said,

    September 2, 2008 @ 7:18 am

    用上了，谢谢

RSS feed for comments on this post · TrackBack URI

Leave a Comment