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

WordPress教程 hank 2年前 (2018-12-24) 228次浏览 0个评论

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

找到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. }

酷蓝地带 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:给wotdpress知更鸟Begin主题缩略图添加圆角边框
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址