番茄论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz

知更鸟Begin主题缩略图和幻灯片添加圆角边框 —— WordPress...

[复制链接]
发表于 2020-1-9 17:04:18 | 显示全部楼层 |阅读模式

知更鸟Begin主题缩略图和幻灯片添加圆角边框 —— WordPress美化
在一些博客看到他们的缩略图等都不是方方正正,而是带有圆角边框,今天特分享给大家。
20170827-yuanjiao.jpg
代码部署(缩略图)
方法一:(知更鸟Begin主题5.2版)
找到style.css文件里缩略图的class名 .thumbnail
  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. }
复制代码
在{ }中间添加以下两行属性:
  1. //缩略图添加边框
  2. border:1px solid #ccc;
  3. padding:4px;
复制代码
添加后完整代码如下:
  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.    border:1px solid #ccc;
  9.    padding:4px;
  10.    overflow: hidden;
  11.    transition-duration: .5s;
  12. }
复制代码
自用的代码:
  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.    border-radius: 8px;
  11.    -webkit-box-shadow: rgba(0,0,0,0.496094) 3px 3px 3px;
  12. }
复制代码
方法二:(知更鸟Begin主题LTS版)
直接复制放到:后台的主题选项 - 定制风格 - 自定义样式
  1. .thumbnail {
  2.     border-radius: 6px;
  3.     box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
  4. }
复制代码
效果图
20170827-yuanjiao02.jpg
代码部署(幻灯片)
  1. #slider img {
  2. border-radius: 8px;
  3. }
复制代码
代码部署(网站圆角样式集合)
直接复制放到:后台的主题选项 - 定制风格 - 自定义样式
  1. /*  网站圆角样式集合  */
  2. #slider img,.cat-box, .cat-title,.fadeInUp,#sidebar h3,.cat-grid-title, .cat-square-title,.nbs-flexisel-container,img,h1, h2, h3, h4, h5, h6,a,.nav-menu, .nav-menu *,.type-cat a, .child-cat a,.link-all a
  3. {border-radius: 10px
  4. }
复制代码
备注:缩略图阴影圆角效果要单独添加,上图样式可自行调整删减。最下面的网站圆角样式集合可以配合使用
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


QQ|Archiver|手机版|小黑屋|番茄论坛

GMT+8, 2020-8-11 14:06 , Processed in 0.202195 second(s), 29 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表