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

2020年4月26日15:29:32 发表评论 114 次浏览

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

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

代码部署(缩略图)

方法一:(知更鸟Begin主题5.2版)

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

  1. .thumbnail {
  2.    positionrelative;
  3.    floatleft;
  4.    max-width200px;
  5.    heightauto;
  6.    clearboth;
  7.    margin1px 20px 0 0;
  8.    overflowhidden;
  9.    transition-duration: .5s;
  10. }

 

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

温馨提示: 此处内容需要 评论本文刷新本页 即可查看

添加后完整代码如下:
温馨提示: 此处内容需要 评论本文刷新本页 即可查看

方法二:(知更鸟Begin主题LTS版)

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

温馨提示: 此处内容需要 评论本文刷新本页 即可查看

代码部署(网站圆角样式集合)

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

温馨提示: 此处内容需要 评论本文刷新本页 即可查看

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

weinxin
小Q年
关注公众号,获取前沿分享
smallQ

发表评论

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