Loading
0

wordpress知更鸟Begin主题缩略图及方框添加圆角边框 ——WordPress美化教程

技术小学生微信公众号
腾讯云服务器大促销。
华为服务器

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

 

自用的代码:

[reply]

  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. border-radius: 8px;
  11.     -webkit-box-shadow: rgba(0,0,0,0.496094) 3px 3px 3px;
  12. }

如果出现手机端不兼容的情况请用下面代码试试(最简单直接建议使用):

  1. /*缩略图添加圆角和背影特效*/
  2. .thumbnail {
  3.     border-radius: 6px;
  4.     box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
  5. }

[/reply]

效果如下:

首页幻灯片圆角

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

 

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

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

技术小学生微信公众号
华为服务器
腾讯云服务器大促销。

声明:站长码字很辛苦啊,转载时请保留本声明及附带文章链接:https://blog.tag.gg/showinfo-19-18652-0.html
亲爱的:若该文章解决了您的问题,可否收藏+评论+分享呢?
上一篇:自动为WordPress站点关键词添加链接(非插件)
下一篇:wordpress主题页面顶部加载进度条的实现(纯代码)