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

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

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

 

知更鸟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

    • test test 1 来自天朝的朋友 北京市朝阳区 联通
      回复 2018年1月14日 12:58  21楼

      厉害了啊

      • 东子 东子 1 来自天朝的朋友 河北省保定市 电信
        回复 2018年1月14日 19:45  22楼

        学习学习 谢谢了

        • Jack Cui Jack Cui 2 来自天朝的朋友 辽宁省沈阳市 东北大学四舍(女生)
          回复 2018年1月15日 16:23  23楼

          疯狂学习

          • In Part In Part 2 来自天朝的朋友 广东省深圳市 电信
            回复 2018年1月17日 10:35  24楼

            666不错

            • 寒辞 寒辞 1 来自天朝的朋友 广东省潮州市 联通
              回复 2018年1月25日 21:03  25楼

              看看你的自用的如何

              • ss ss 1 Canada 加拿大 卡尔加里Shaw通信公司
                回复 2018年2月1日 22:36  26楼

                看看

                • mc腐竹网 mc腐竹网 3 来自天朝的朋友 贵州省遵义市红花岗区 联通
                  回复 2018年2月16日 19:51  27楼

                  赞

                  • aiyu aiyu 1 来自天朝的朋友 北京市 电信通
                    回复 2018年2月27日 02:11  28楼

                    - 0 -添加了两行好像没成功，看看自用的有没玄机

                    • 番号福利 番号福利 3 来自天朝的朋友 河北省邢台市 电信
                      回复 2018年7月3日 00:21  29楼

                      666，学习了

                      • 流行搭配 流行搭配 2 来自天朝的朋友 湖北省 移动
                        回复 2018年7月9日 11:54  30楼

                        这个不错

                        • adasd adasd 1 来自天朝的朋友 四川省成都市 电信
                          回复 2018年8月8日 19:12  31楼

                          看看

                          • FlyFish FlyFish 2 来自天朝的朋友 天津市 电信IDC机房
                            回复 2018年8月9日 15:57  32楼

                            支持谢谢

                            • 晓梦 晓梦 3 来自天朝的朋友 河北省邯郸市 电信
                              回复 2018年8月30日 23:16  33楼

                              支持博主

                              • wuchen wuchen 2 来自天朝的朋友 广东省中山市 电信
                                回复 2018年9月11日 22:03  34楼

                                sadjhgfjsdfskl我

                                • 糖果博客 糖果博客 2 来自天朝的朋友 浙江省杭州市 电信
                                  回复 2018年9月15日 13:28  35楼

                                  支持博主

                                  • aasa aasa 0 Canada 加拿大
                                    回复 2018年10月2日 10:57  36楼

                                    wqewq十三点

                                    • sa sa 0 Canada 加拿大
                                      回复 2018年10月2日 11:07  37楼

                                      是世界

                                      • voice站点 voice站点 3 来自天朝的朋友 四川省成都市 电信
                                        回复 2018年11月10日 22:52  38楼

                                        支持

                                        • 爱 爱 2 来自天朝的朋友 湖北省武汉市 电信
                                          回复 2018年11月14日 17:11  39楼

                                          好 谢谢

                                          • 太尔库提网 太尔库提网 2 来自天朝的朋友 新疆克孜勒苏柯尔州阿克陶县 电信
                                            回复 2018年12月2日 22:04  40楼

                                            看看吧