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

2017年8月27日10:41:23 54 3,962
摘要

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

 

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

 

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

 

 

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的QQ
  • QQ扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin

发表评论

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

目前评论:54   其中:访客  53   博主  1

    • pinzhi123 pinzhi123 1 Canada 加拿大

      还不错

      • 小航工作室 小航工作室 2 来自天朝的朋友 广东省深圳市 联通

        看看哦

        • 发表 发表 1 Canada 加拿大

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

          • jiaowa.ren jiaowa.ren 3 来自天朝的朋友 江苏省南京市 移动

            • 小米米 小米米 3 来自天朝的朋友 吉林省吉林市 联通

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

              • it学馆 it学馆 0 来自天朝的朋友 谷歌浏览器 Windows 7 陕西省西安市 电信

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

                • 丫丫网 丫丫网 1 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信

                  还不错

                  • xichengwan xichengwan 4 来自天朝的朋友 火狐浏览器 Windows 10 河南省郑州市 联通

                    谢谢

                    • 北寒 北寒 1 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 联通

                      看看哈

                      • 小弟 小弟 1 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 联通

                        小弟来看看啦