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

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

}

自用的代码：

[reply]

.thumbnail {

position: relative;

float: left;

max-width: 200px;

height: auto;

clear: both;

margin: 1px 20px 0 0;

overflow: hidden;

    transition-duration: .5s;

border-radius: 8px;

    -webkit-box-shadow: rgba(0,0,0,0.496094) 3px 3px 3px;

}

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

/*缩略图添加圆角和背影特效*/

.thumbnail {

    border-radius: 6px;

    box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;

}

[/reply]

效果如下:

首页幻灯片圆角

#slider img {

border-radius: 8px;

}

/** 网站圆角样式集合 **/

#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

}

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