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

  • A+
所属分类:WordPress

效果如图:

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

找到当前使用主题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. }

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

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

添加后完整代码如下:

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

知更鸟Begin主题自用的代码:

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

以下为首页幻灯片圆角:

  1. #slider img {
  2. border-radius: 8px;
  3. }

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

  1. /** 网站圆角样式集合 **/
  2. #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
  3. {border-radius: 8px
  4. }
备注

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

weinxin
我的微信
分享和发布网站源码、免费软件下载和网站搭建技术教程,致力创造一个高质量网络资源教程的分享平台。

发表评论

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