wordpress美化-缩略图添加边框、边框圆角、及阴影效果

Auth:老张       Date:2018/10/30       Cat:电脑网络       Word:共499字

◷2018/10/30   👁浏览:6.8K   暂无评论
文章目录 「隐藏」
  1. 直接在主题的style.css文件里增加代码:

wordpress美化是每一个网站必做的事,做的效果好了可以增强用户体验,这里详细告诉大家缩略图美化的相关知识。

具体效果看网站实景演示

wordpress美化-缩略图添加边框、边框圆角、及阴影效果 - 第1张图片

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

在主题的style.css文件中查找以下代码

  1. .thumbnail {
  2.     positionrelative;
  3.     floatleft;
  4.     max-width200px;
  5.     heightauto;
  6.     clearboth;
  7.     margin1px 20px 0 0;
  8.     overflowhidden;
  9.     transition-duration: .5s;
  10. }

在{}之间何意行添加以下代码即可以实现缩略图添加边框效果

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

同理,添加以下代码可以实现边框圆角及缩略图阴影效果

  1. /**缩略图添加阴影及边框圆角效果 **/
  2. border-radius: 6px;
  3. box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
缩略图添加边框及增加圆角阴影可以二选一,达到你想的美化即可

 

《wordpress美化-缩略图添加边框、边框圆角、及阴影效果》留言数:0

发表留言