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

一点优化
一点优化
一点优化
478
文章
49
评论
2019年12月25日21:36:54 2 1.2K看 1134字

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

.thumbnail {
position: relative;
float: left;
max-width: 200px;
height: auto;
clear: both;
margin: 1px 20px 0 0;
overflow: hidden;
transition-duration: .5s;
}

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

//缩略图添加边框

border:1px solid #ccc;

padding:4px;

添加后完整代码如下:

.thumbnail {
position: relative;
float: left;
max-width: 200px;
height: auto;
clear: both;
margin: 1px 20px 0 0;
border:1px solid #ccc;
padding:4px;
overflow: hidden;
transition-duration: .5s;
}

自用的代码:

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

效果如下:
wordpress知更鸟Begin主题缩略图及方框添加圆角边框

首页幻灯片圆角

#slider img {
border-radius: 8px;
}

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

/** 网站圆角样式集合 **/
#slider img,.single-tag li a,#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
{border-radius: 8px
}

备注缩略图阴影圆角效果要单独添加,上图样式可自行调整删减。

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
如何在WordPress知更鸟上加文字边框 wp美化

如何在WordPress知更鸟上加文字边框

其实这是一点优化拔的知更鸟本身的代码,直接审查元素,然后参考,修改出来,才能生效的;要注意的就是不能和知更鸟本身的代码相同,不然会产生错位,需要修改DIV和CSS;效果长下面那个样,我做的有点丑哈,大...
匿名

发表评论

匿名网友

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

评论:2   其中:访客  2   博主  0
    • 备爱的胖胖 备爱的胖胖 1

      谢谢分享

      • 糖果博客 糖果博客 1

        谢谢分享