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

2018年5月8日22:04:15 47 22,720

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

.thumbnail {
    position: relative;
    float: left;
    max-width: 200px;
    height: auto;
    clear: both;
    margin: 1px 20px 0 0;
    overflow: hidden;
    transition-duration: .5s;
}

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

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

添加后完整代码如下：

.thumbnail {
position: relative;
float: left;
max-width: 200px;
height: auto;
clear: both;
margin: 1px 20px 0 0;
border:1px solid #ccc;
padding:4px;
overflow: hidden;
transition-duration: .5s;
}

自用的代码：

此处为隐藏的内容！

发表评论并刷新，才能查看

发表评论

效果如下:

首页幻灯片圆角

#slider img {
border-radius: 8px;
}

wordpress知更鸟Begin主题缩略图及方框添加圆角边框 ——WordPress美化教程的图片 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
{border-radius: 8px
}

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

欢迎加入中国SEO站长博客之家

本站的所有资源都会上传分享到博客之家，希望大家互相学习交流进步。

版权声明： 企鹅博客发表于 2018年5月8日22:04:15，共 1227 字。
转载请注明：wordpress知更鸟Begin主题缩略图及方框添加圆角边框 ——WordPress美化教程 | 企鹅SEO

发表评论取消回复

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

企鹅seo 4 日本
回复 2018年5月8日下午10:13 沙发
这个很漂亮
偷偷→爱你！ 0 四川省凉山州移动
回复 2018年5月16日下午9:24 板凳
学习一下
简简单单 0 上海市浦东新区电信
回复 2018年5月22日下午6:05 地板
学习一下
- 企鹅seo 4 日本
  回复 2018年5月22日下午8:06 1层
  @简简单单互相学习
这个很漂亮 1 上海市移动
回复 2018年5月30日上午11:17 4楼
这个很漂亮
Administrator 1 广东省汕头市电信
回复 2018年6月5日下午9:46 5楼
谢谢
花花牛 1 北京市移动
回复 2018年6月10日下午2:06 6楼
来看看
花花牛 0 北京市移动
回复 2018年6月26日下午12:40 7楼
必须来看看
123123 1 江苏省盐城市电信
回复 2018年6月27日下午7:42 8楼
有隐藏的内容吗我那看
123 2 上海市鹏博士长城宽带
回复 2018年7月8日下午1:06 9楼
研究研究，谢谢哈
闻到 0 辽宁省大连市大连海事大学
回复 2018年7月11日下午5:01 10楼
看看
夏尺 2 山东省移动
回复 2018年7月22日下午2:13 11楼
感谢博主的分享！
夏尺 2 山东省移动
回复 2018年7月22日下午3:14 12楼
咦，我记得回复了这个的，今天给贵站贡献了不少浏览量，哈哈
岐山猕猴桃 1 上海市电信
回复 2018年7月28日下午6:40 13楼
学习了！
AIXAN 1 河南省平顶山市电信
回复 2018年7月31日下午8:54 14楼
漂亮
完成未完成 0 河南省移动
回复 2018年8月4日下午3:10 15楼
border:1px solid #ccc;
padding:4px;ss试试
久留不走i 1 北京市方正宽带
回复 2018年8月7日下午8:44 16楼
拿教程咯
voice站点 2 四川省成都市电信
回复 2018年8月16日下午8:14 17楼
学习一下
壹清云 1 辽宁省阜新市联通
回复 2018年8月22日下午4:19 18楼
一针见血的评论，来了
云≥ω≤ 0 陕西省西安市电信
回复 2018年8月22日下午10:14 19楼
学习一下
去看你博客 1 北京市移动
回复 2018年8月27日下午8:17 20楼
这个看看怎么弄
2B博客 2 甘肃省白银市电信
回复 2018年8月30日下午5:26 21楼
又要偷走
2B博客 2 中国移动
回复 2018年8月30日下午10:14 22楼
再看一次。。。
晓梦 0 河北省邯郸市电信
回复 2018年9月2日下午2:28 23楼
支持
2B博客 2 中国移动
回复 2018年9月2日下午8:53 24楼
看看
nicheng中文 2 湖北省武汉市鹏博士长城宽带
回复 2018年9月8日下午2:33 25楼
好，非常好
啊 2 河北省廊坊市电信
回复 2018年9月10日上午11:58 26楼
很好看不错
wh 2 中国
回复 2018年9月12日下午6:53 27楼
漂亮6666
666 1 上海市电信
回复 2018年9月12日下午7:32 28楼
漂亮
aions 1 陕西省榆林市电信
回复 2018年9月13日上午11:20 29楼
看看怎么样。。。。
qqqqq 1 广东省中山市电信
回复 2018年9月13日下午12:17 30楼
学习一下
秋叶home 2 山东省临沂市电信
回复 2018年9月30日下午11:07 31楼
学学习
法定人认购 1 陕西省西安市电信
回复 2018年10月2日上午1:46 32楼
很不错
良人 1 重庆市联通
回复 2018年10月6日上午9:43 33楼
我去⊙∀⊙！
fff 1 广东省佛山市联通
回复 2018年10月9日下午8:50 34楼
这个很好看
pengyouyi 0 江苏省苏州市电信
回复 2018年10月10日下午9:45 35楼
不错的文章我来研究谢谢
shuai 1 IANA 保留地址
回复 2018年10月16日上午7:36 36楼
很漂亮
ayuwang 2 河北省廊坊市电信
回复 2018年10月16日下午1:19 37楼
改造的不错
Orange 1 山东省菏泽市巨野县联通
回复 2018年10月21日下午1:29 38楼
看看
zhuzihongyu 1 浙江省杭州市电信
回复 2018年10月22日下午11:53 39楼
感谢大佬分享
aini99 1 内蒙古通辽市联通
回复 2018年10月24日下午7:42 40楼
看看
Mr.张 0 江苏省宿迁市电信
回复 2018年10月28日上午7:17 41楼
感谢分享呀，你这个评论特效牛X呀
aini99 1 内蒙古通辽市联通
回复 2018年11月1日上午1:53 42楼
好好好
石家庄seo 1 河北省联通
回复 2018年11月10日下午2:40 43楼
学习一下
灵悟 1 上海市崇明县电信
回复 2018年11月13日下午9:59 44楼
学习一下
好一个秋 1 云南省昆明市联通
回复 2018年11月20日下午7:24 45楼
学习一下
┊√ 小浩゛____ 1 山东省联通
回复 2018年11月22日下午8:07 46楼
来刷个IP哈哈。