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

2018年5月8日22:04:15 31 23,169 views

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

 

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

 

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

 

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

添加后完整代码如下：

  1. .thumbnail {
  2.     position: relative;
  3.     float: left;
  4.     max-width: 200px;
  5.     height: auto;
  6.     clear: both;
  7.     margin: 1px 20px 0 0;
  8.     border:1px solid #ccc;
  9.     padding:4px;
  10.     overflow: hidden;
  11.     transition-duration: .5s;
  12. }

 

自用的代码：

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

效果如下:

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

首页幻灯片圆角

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

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

 

  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
欢迎加入中国SEO站长博客之家
本站的所有资源都会上传分享到博客之家，希望大家互相学习交流进步。中国企鹅SEO站长博客群
企鹅博客

发表评论

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

目前评论：31   其中：访客  31   博主  0

    • avatar 企鹅seo 4
      回复 2018年5月8日 下午10:13  沙发

      这个很漂亮

      • avatar 偷偷→爱你！ 0
        回复 2018年5月16日 下午9:24  板凳

        学习一下

        • avatar 简简单单 0
          回复 2018年5月22日 下午6:05  地板

          学习一下

            • avatar 企鹅seo 4
              回复 2018年5月22日 下午8:06  1层

              @简简单单 互相学习

            • avatar 这个很漂亮 1
              回复 2018年5月30日 上午11:17  4楼

              这个很漂亮

              • avatar Administrator 1
                回复 2018年6月5日 下午9:46  5楼

                谢谢

                • avatar 花花牛 1
                  回复 2018年6月10日 下午2:06  6楼

                  来看看

                  • avatar 花花牛 0
                    回复 2018年6月26日 下午12:40  7楼

                    必须来看看

                    • avatar 123123 1
                      回复 2018年6月27日 下午7:42  8楼

                      有隐藏的内容吗 我那看

                      • avatar 123 2
                        回复 2018年7月8日 下午1:06  9楼

                        研究研究，谢谢哈

                        • avatar 闻到 0
                          回复 2018年7月11日 下午5:01  10楼

                          看看

                          • avatar 夏尺 2
                            回复 2018年7月22日 下午2:13  11楼

                            感谢博主的分享！

                            • avatar 夏尺 2
                              回复 2018年7月22日 下午3:14  12楼

                              咦，我记得回复了这个的，今天给贵站贡献了不少浏览量，哈哈

                              • avatar 岐山猕猴桃 1
                                回复 2018年7月28日 下午6:40  13楼

                                学习了！

                                • avatar AIXAN 1
                                  回复 2018年7月31日 下午8:54  14楼

                                  漂亮

                                  • avatar 完成未完成 0
                                    回复 2018年8月4日 下午3:10  15楼

                                    border:1px solid #ccc;
                                    padding:4px;ss试试

                                    • avatar 久留不走i 1
                                      回复 2018年8月7日 下午8:44  16楼

                                      拿教程咯

                                      • avatar voice站点 1
                                        回复 2018年8月16日 下午8:14  17楼

                                        学习一下

                                        • avatar 壹清云 1
                                          回复 2018年8月22日 下午4:19  18楼

                                          一针见血的评论，来了

                                          • avatar 云≥ω≤ 0
                                            回复 2018年8月22日 下午10:14  19楼

                                            学习一下

                                            • avatar 去看你博客 1
                                              回复 2018年8月27日 下午8:17  20楼

                                              这个看看怎么弄

                                              • avatar 2B博客 2
                                                回复 2018年8月30日 下午5:26  21楼

                                                又要偷走

                                                • avatar 2B博客 2
                                                  回复 2018年8月30日 下午10:14  22楼

                                                  再看一次。。。

                                                  • avatar 晓梦 0
                                                    回复 2018年9月2日 下午2:28  23楼

                                                    支持

                                                    • avatar 2B博客 2
                                                      回复 2018年9月2日 下午8:53  24楼

                                                      看看

                                                      • avatar nicheng中文 2
                                                        回复 2018年9月8日 下午2:33  25楼

                                                        好，非常好

                                                        • avatar 啊 2
                                                          回复 2018年9月10日 上午11:58  26楼

                                                          很好看不错

                                                          • avatar wh 2
                                                            回复 2018年9月12日 下午6:53  27楼

                                                            漂亮6666

                                                            • avatar 666 1
                                                              回复 2018年9月12日 下午7:32  28楼

                                                              漂亮

                                                              • avatar aions 1
                                                                回复 2018年9月13日 上午11:20  29楼

                                                                看看怎么样。。。。

                                                                • avatar qqqqq 1
                                                                  回复 2018年9月13日 下午12:17  30楼

                                                                  学习一下