【WordPress美化教程】缩略图添加边框、边框圆角、及阴影效果

建站学习44

【WordPress美化教程】缩略图添加边框、边框圆角、及阴影效果

wordpress美化是每一个网站必做的事，做的效果好了可以增强用户体验，这里详细告诉大家缩略图美化的相关知识。文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23340.html

具体效果看网站实景演示文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23340.html

直接在主题的style.css文件里增加代码：

在主题的style.css文件中查找以下代码文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23340.html

  1. .thumbnail {
  2.     position: relative;
  3.     float: left;
  4.     max-width: 200px;
  5.     height: auto;
  6.     clear: both;
  7.     margin: 1px 20px 0 0;
  8.     overflow: hidden;
  9.     transition-duration: .5s;
  10. }

在{}之间何意行添加以下代码即可以实现缩略图添加边框效果文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23340.html

  1. //缩略图添加边框
  2. border:1px solid #ccc;
  3. padding:4px;

同理，添加以下代码可以实现边框圆角及缩略图阴影效果文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23340.html

  1. /**缩略图添加阴影及边框圆角效果 **/
  2. border-radius: 6px;
  3. box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;

内容来源：孤狼博客文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23340.html 文章源自GTA6吧-美文语录，生活常识，建站知识分享-https://igta6.com/23340.html

本文来自网络，本站仅作分享交流，非商业赢利为目的。
如有侵权，请及时联系我们删除！gta-vc@foxmail.com