知更鸟主题缩略图添加边框

 2017年07月11日 20:23  3,682  6  打印本文  

部署代码：

找到style.css文件里缩略图的class名 .thumbnail 

在{ }中间添加以下两行属性：

  1. //缩略图添加边框
  2. border:1px solid #ccc;
  3. padding:4px;

添加后代码如下：

  1. .thumbnail {
  2.     position: relative;
  3.     float: left;
  4.     max-width: 200px;
  5.     height: auto;
  6.     clear: both;
  7.     margin: 1px 20px 0 0;
  8.     border:1px solid #ccc;  
  9.     padding:4px;  
  10.     overflow: hidden;
  11.     transition-duration: .5s;
  12. }

注：添加边框会导致文章列表框变高。

效果图：

知更鸟主题缩略图添加边框

weinxin
小算草微信公众号
扫一扫关注小算草微信公众号，打开微信简简单单即可查看小算草所有内容，更快捷更方便。
Mr Y

吐槽一下

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    • avatar 明月学习笔记Blog 谷歌浏览器 Windows 10 美国 谷歌公司云数据中心 【小白】
      回复 2017年7月30日 14:39

      不错，这个效果感觉好酷呀！收了！谢谢分享！

      • avatar 福利堆 来自天朝的朋友 谷歌浏览器 Windows 10 四川省自贡市 电信 【书童】
        回复 2017年7月28日 15:51

        加了以后 很漂亮

        • avatar Koolight 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省岳阳市 联通 【进士】
          回复 2017年7月12日 21:59

          我只加了圆角，博主太厉害了，把边框也加上了！

            • avatar 九哥 站长 来自天朝的朋友 Safari浏览器 iPad OS 9_3 like Mac OS X
              回复 2017年7月12日 22:14

              @Koolight 我现在这个效果加边框不好看了，希望有喜欢的人拿去用吧！