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

1,088次阅读
没有评论

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

找到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. }
正文完
 0
hank
版权声明:本站原创文章,由 hank 于2018-12-24发表,共计594字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码