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

 2017年07月11日 20:23  4,257  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 美国 谷歌公司云数据中心 【小白】

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

      • avatar 福利堆 来自天朝的朋友 谷歌浏览器 Windows 10 四川省自贡市 电信 【书童】

        加了以后 很漂亮

        • avatar Koolight 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省岳阳市 联通 【进士】

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

            • avatar 九哥 站长 来自天朝的朋友 Safari浏览器 iPad OS 9_3 like Mac OS X

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