wordpress网站图片添加圆角及边框阴影悬浮效果CSS代码+插件

医生笔记
22年6月14日
编辑

周郎中

细心留意百度搜索的同学可能已经发现，百度目前全站结果页面显示图片均采用圆角风格，这个改变势必使新一代互联网跟随。本站最近也添加了文章图片的圆角阴影边框显示，这样更能凸显出文中含有文字的图片与文字的区分，让读者心情愉悦。

图片圆角风格美观灵动，图片四周阴影有悬浮视觉，要想实现这样的效果，有以下两种方式：CSS代码+插件

图片阴影悬浮

一：CSS代码：复制代码加入到使用主题的CSS.style文件中即可，推荐修改子主题的CSS文件，记得清空缓存后查看效果！
1.指定文章正文图片CSS代码：

.wp-caption img {
border-radius:8px;  /*赋圆角值 大小结合自己喜好修改*/
box-shadow: rgba(0,0,0,0.5) 0px 3px 8px;  /*赋阴影值 大小结合自己喜好修改*/
}

说明：执行CSS效果的图片元素名称可以任意修改，如b2主题正文图片的元素名称就是：.wp-caption img，您也可以将文章列表的图片加上该CSS效果。根据自己所用主题不同位置的图片元素代码添加：将鼠标放在网站对应图片上，右键选择审核元素，即可看到该类图片的元素名称。

2.指定文章列表缩略图CSS代码：

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

3.鼠标选中图片变圆角动态CSS代码：

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

4.鼠标选中变浮动背影效果CSS代码：首页+文章页酷炫预览效果-www.ilunpo.com

.entry-more a {
    opacity:0;
}
.post:hover .entry-more a {
    right:0;
    opacity:1;
}
.post {
    transition:all 0.3s ease 0s;
}
.post:hover {
    transform:translateY(-3px);
    z-index:1;
    -webkit-box-shadow:0 15px 32px rgb(175,135,255)!important;
}

二：插件：WP Image Borders
1.该插件安装后，可以一键设置边框及边框粗细和颜色，以及圆角等多种风格，还有阴影CSS效果可以设置。