文章目录 「隐藏」
wordpress美化是每一个网站必做的事,做的效果好了可以增强用户体验,这里详细告诉大家缩略图美化的相关知识。
具体效果看网站实景演示
直接在主题的style.css文件里增加代码:
在主题的style.css文件中查找以下代码
- .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;
同理,添加以下代码可以实现边框圆角及缩略图阴影效果
- /**缩略图添加阴影及边框圆角效果 **/
- border-radius: 6px;
- box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
缩略图添加边框及增加圆角阴影可以二选一,达到你想的美化即可