知更鸟Begin主题缩略图和幻灯片添加圆角边框 —

仙踪小栈 2017年8月27日10:41:23 70 0

摘要

在一些博客看到他们的缩略图等都不是方方正正，而是带有圆角边框，今天特分享给大家。

代码部署（缩略图）

方法一：（知更鸟Begin主题5.2版）

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

自用的代码：

此处为隐藏的内容！

发表评论并刷新，方可查看

发表评论

方法二：（知更鸟Begin主题LTS版）

直接复制放到：后台的主题选项 - 定制风格 - 自定义样式

.thumbnail {
border-radius: 6px;
box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
}

效果图

代码部署（幻灯片）

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

代码部署（网站圆角样式集合）

直接复制放到：后台的主题选项 - 定制风格 - 自定义样式

/* 网站圆角样式集合 */
#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: 10px
}

备注：缩略图阴影圆角效果要单独添加，上图样式可自行调整删减。最下面的网站圆角样式集合可以配合使用

若文章图片、下载链接等信息出错，请在评论区留言反馈，博主将第一时间更新！如果喜欢，请打赏支持本站，谢谢大家！

Warning: mysqli_query(): (HY000/1194): Table 'wp_posts' is marked as crashed and should be repaired in /home/www/ixianzong.com/wp-includes/class-wpdb.php on line 2431