知更鸟Begin主题缩略图和幻灯片添加圆角边框 —— WordPress美化

2017年8月27日10:41:23 70 25,731
摘要

在一些博客看到他们的缩略图等都不是方方正正，而是带有圆角边框，今天特分享给大家。

 

知更鸟Begin主题缩略图和幻灯片添加圆角边框 —— WordPress美化

 

代码部署（缩略图）

方法一：（知更鸟Begin主题5.2版）

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

  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.    overflow: hidden;
  9.    transition-duration: .5s;
  10. }

 

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

  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. }

 

自用的代码：

此处为隐藏的内容！
发表评论并刷新，方可查看
发表评论

 

方法二：（知更鸟Begin主题LTS版）

直接复制放到：后台的主题选项 - 定制风格 - 自定义样式

  1. .thumbnail {
  2.     border-radius: 6px;
  3.     box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
  4. }

 

效果图

知更鸟Begin主题缩略图和幻灯片添加圆角边框 —— WordPress美化

 

代码部署（幻灯片）

  1. #slider img {
  2. border-radius: 8px;
  3. }

 

代码部署（网站圆角样式集合）

直接复制放到：后台的主题选项 - 定制风格 - 自定义样式

  1. /*  网站圆角样式集合  */
  2. #slider img,.cat-box, .cat-title,.fadeInUp,#sidebar h3,.cat-grid-title, .cat-square-title,.nbs-flexisel-container,img,h1, h2, h3, h4, h5, h6,a，.nav-menu, .nav-menu *,.type-cat a, .child-cat a,.link-all a
  3. {border-radius: 10px
  4. }

 

备注：缩略图阴影圆角效果要单独添加，上图样式可自行调整删减。最下面的网站圆角样式集合可以配合使用

 

 

若文章图片、下载链接等信息出错，请在评论区留言反馈，博主将第一时间更新！如果喜欢，请打赏支持本站，谢谢大家！
历史上的今天
8月
27

发表评论

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

目前评论：70   其中：访客  0   博主  0

    • 请输入您的QQ号 请输入您的QQ号 1 来自天朝的朋友 陕西省汉中市 电信
      回复 2017年8月31日 15:03  沙发

      这个真是好啊，分享的好，回去我赶紧把主题DIY下 :mrgreen:

      • 请输入您的QQ号 请输入您的QQ号 0 来自天朝的朋友 北京市 电信通
        回复 2017年8月31日 15:13  板凳

        咦，评论被吞了？！！！！！

        • 酷客星球 酷客星球 2 来自天朝的朋友 湖北省黄石市 电信
          回复 2017年9月20日 09:46  地板

          咦！好东西！

          • cc cc 1 来自天朝的朋友 浙江省金华市 电信
            回复 2017年10月4日 20:27  4楼

            我改了 怎么没有呢？

            • 枫叶 枫叶 3 来自天朝的朋友 广东省广州市 电信
              回复 2017年10月8日 19:59  5楼

              我也要试试

              • wuya wuya 2 来自天朝的朋友 广东省深圳市 铁通
                回复 2017年10月9日 21:25  6楼

                感谢分享

                • 久伴 久伴 3 来自天朝的朋友 四川省成都市 电信
                  回复 2017年10月10日 17:16  7楼

                  不错,来看看

                  • 小白 小白 3 来自天朝的朋友 山东省济南市 电信
                    回复 2017年10月14日 18:46  8楼

                    感谢分享

                    • 胡俊杰 胡俊杰 4 来自天朝的朋友 浙江省宁波市 联通
                      回复 2017年10月31日 00:04  9楼

                      谢谢

                      • 请输入您的QQ号 请输入您的QQ号 1 来自天朝的朋友 云南省红河州个旧市 电信
                        回复 2017年11月1日 15:28  10楼

                        非常感谢，收下了

                        • sdfds sdfds 1 来自天朝的朋友 四川省成都市 电信
                          回复 2017年11月3日 16:38  11楼

                          飞得更高过过过过过过

                          • 南城旧少年 南城旧少年 2 来自天朝的朋友 浙江省杭州市 移动
                            回复 2017年11月18日 02:59  12楼

                            学习了

                            • huzi huzi 4 来自天朝的朋友 北京市 宽带通
                              回复 2017年11月18日 22:07  13楼

                              学习了

                              • 大飞 大飞 2 来自天朝的朋友 安徽省合肥市 电信
                                回复 2017年11月23日 23:38  14楼

                                试试看看！

                                • 123 123 4 来自天朝的朋友 浙江省杭州市 华数宽带
                                  回复 2017年11月26日 23:36  15楼

                                  厉害

                                  • 包子 包子 3 来自天朝的朋友 广东省佛山市 电信
                                    回复 2017年12月2日 15:41  16楼

                                    试试看看！

                                    • sunfase sunfase 4 来自天朝的朋友 中国 移动
                                      回复 2017年12月2日 17:56  17楼

                                      赞。。。。。。

                                      • 静水流深 静水流深 3 来自天朝的朋友 山东省东营市 联通
                                        回复 2017年12月25日 14:14  18楼

                                        哈哈哈哈哈哈哈哈

                                        • fgbggf fgbggf 3 来自天朝的朋友 重庆市 移动
                                          回复 2017年12月26日 22:26  19楼

                                          厉害了

                                          • Eagle Eagle 3 来自天朝的朋友 广东省深圳市 电信
                                            回复 2017年12月29日 15:00  20楼

                                            厉害了我的哥