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

Ourboke
Ourboke
Ourboke
440
文章
112
评论
2020年11月8日12:27:31
评论
27

对于一个站长来说都想达到一个美化的效果,因为只要当你的网站美化了,效果好看,内容更丰富多彩了才能更多好的留住用户。

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;

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

茫茫人海能够相遇便是缘分,但请记住;尊重每一份辛勤的汗水,所以转载请注明出处,谢谢!
Ourboke
  • 本文由 发表于 2020年11月8日12:27:31
  • 转载请务必保留本文链接:https://www.ourboke.com/2070.html
WordPress上下篇文章链接如何添加缩略图 WordPress

WordPress上下篇文章链接如何添加缩略图

大多数WordPress主题都会在文本下方添加指向下一篇文章的链接。 您可以通过以下代码在此链接中添加缩略图,以使其更加醒目。一起来看看吧: WordPress上下篇文章链接如何添加缩略图 将以下代码...
如何手动更新WordPress WordPress

如何手动更新WordPress

之前一直都是用后台更新WordPress版本,觉得十分方便快捷。近期在网站后台更新WordPress总会遇到一些莫名的问题,要么是文件权限问题,要么出现困顿,再要么就是有点小bug,十分让人懊恼,索性...
匿名

发表评论

匿名网友

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