wordpress主题缩略图添加边框、边框圆角、及阴影效果

2019年2月3日23:18:45 评论 1,033 views 538字阅读1分47秒

对于一个站长来说都想达到一个美化的效果,因为只要当你的网站美化了,效果好看,内容更丰富多彩了才能更多好的留住用户。本人认为:WordPress主题的美化是每一个网站必做的事,不仅如此还可以增加自己的动手能力。俗话说得好:你不折腾要来人生干嘛!在这里叶忠文也详细告诉大家关于缩略图美化的相关知识。

wordpress主题缩略图添加边框、边框圆角、及阴影效果

具体效果看网站实景演示

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;

缩略图添加边框及增加圆角阴影可以二选一,达到你想的美化即可!

叶先生
  • 本文由 发表于 2019年2月3日23:18:45
如何快速切换WordPress里的背景图 WordPress

如何快速切换WordPress里的背景图

用过WordPress主题建站的人多半都切换过背景图,就拿本人来说,之前用鸟哥这款Begin主题的时候,就为了追求各种美化加过网站背景图与评论区背景图,还加过自定义鼠标样式,但后期还是因为想要简单简洁...
如何替换WordPress博客的自定义栏目值 WordPress

如何替换WordPress博客的自定义栏目值

我们都知道如果之前添加的自定义栏目值,例如说:附件或者图片链接的地址发生改变,修改起来都是比较麻烦的。好久没进鸟哥的官网看了,今天进去看到这么一个教程感觉挺实用的,里面有篇文章讲到附件或者图片链接的地...
WordPress网站如何更换域名的详细教程讲解 WordPress

WordPress网站如何更换域名的详细教程讲解

WordPress网站如何更换域名?使用WordPress主题建站这么长时间以来,见过很多站长不停的更换网站域名,但不会更换里面的内容。其实这个方法不算新颖,因为在这个方法之前,鸟哥的Begin主题里...
修改数据库密码后导致网站无法打开该怎么解决? 网站建设

修改数据库密码后导致网站无法打开该怎么解决?

今天无缘无故不知道发什么癫,一时兴起,想统一下阿里后台的登录密码,接着把FTP密码也给重置了遍,后面想了下,要不就把数据库密码也统一下吧。统一好了后方才发现网站打不开了,顿时有点百思不得其解,以前用织...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: