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

2018年1月13日08:00:10 发表评论 396 views
广告也精彩

很多时候看知更鸟的缩略图较生硬,今天分享一个代码,把缩略图进行圆角处理!

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

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

修改后的效果

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

  1. /** 缩略图 **/
  2. .thumbnail {
  3.     position: relative;
  4.     float: left;
  5.     max-width: 200px;
  6.     height: auto;
  7.     clear: both;
  8.     margin: 1px 20px 0 0;
  9.     overflow: hidden;
  10.     transition-duration: .5s;
  11. }

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

  1. //缩略图添加边框
  2. border:1px solid #ccc;
  3. padding:4px;

自用的代码:

  1. /** 缩略图 **/
  2. .thumbnail {
  3.  position: relative;
  4.     float: left;
  5.     max-width: 200px;
  6.     height: auto;
  7.     clear: both;
  8.     margin: 1px 20px 0 0;
  9.     overflow: hidden;
  10.     transition-duration: .5s;
  11.     border-radius: 8px;
  12.     -webkit-box-shadow: rgba(0,0,0,0.496094) 3px 3px 3px;
  13. }
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 站长技术资源群
  • 群号:431710796
  • weinxin

发表评论

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