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

细心留意百度搜索的同学可能已经发现,百度目前全站结果页面显示图片均采用圆角风格,这个改变势必使新一代互联网跟随。本站最近也添加了文章图片的圆角阴影边框显示,这样更能凸显出文中含有文字的图片与文字的区分,让读者心情愉悦。
图片圆角风格美观灵动,图片四周阴影有悬浮视觉,要想实现这样的效果,有以下两种方式: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效果可以设置。

插件设置-勾选第一项

插件设置-勾选第一项


2.以下是不同的设置页面:
插件阴影设置

插件阴影设置


插件圆角设置

插件圆角设置

3.插件下载:

周郎中该内容隐藏了,请输密码查看!
关注本站公众微信号,发“密码”,获取密码。添➕搜索“周郎中”或者“docqdcom”微信扫描此处二维码!

说明:推荐使用代码方式,因为插件不一定能够兼容您特定使用主题中图片特有的元素名称,导致启用插件看不到效果的可能。

给TA打赏
共{{data.count}}人
人已打赏
医生笔记

Image J分析Western blot蛋白条带少一个峰的解决办法

2022-6-10 2:13:06

医生笔记

win10系统电脑安装Kaluza Analysis等加密狗软件驱动蓝屏解决方法

2022-6-25 0:29:29

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索