前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WordPress美化-缩略图&整站添加圆角、边框、阴影

WordPress美化-缩略图&整站添加圆角、边框、阴影

作者头像
AlexTao
修改2023-05-16 13:26:06
2.5K0
修改2023-05-16 13:26:06
举报
文章被收录于专栏:钻芒博客钻芒博客

我觉得自己的审美是在一直在变化的,总是感觉还会有更好的效果。那就要不断的更改尝试。

参考日主题,发现圆角用的美轮美奂,整个站点UI都有很大的提升,而我也特别喜欢加圆角和阴影。

直接给整站的图片加圆角-具体样式可以自己修改

  • 效果
代码语言:javascript
复制
/** 网站圆角样式集合 **/
#slider img,.single-tag li a,#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
{border-radius: 8px
}

缩略图修改,每个主题的样式不同,以grace主题为例

  • 效果
  • 缩略图背景加圆角 在主题的style.css文件内第196行样式内添加 border-radius:10px;/*块圆角值*/
  • 缩略图前景(图片)加圆角 在主题的style.css文件内第354行样式内添加 border-radius:10px;/*块圆角值*/

更新【WordPress文章添加彩色美化框及彩色按钮】一文样式

  • 效果-样式加了圆角显示和阴影效果。修复了行距更加美观。
  • 样式替换 /*网站新增彩色警示文本框*/ #tbc_cyan { color: #24b4f0; background: #c0e8ff url('/wp-content/themes/dux/diy/img/tbc_cyan.png') -1px -1px no-repeat; border: 1px solid #24b4f0; overflow: hidden; margin: 10px 0; padding: 15px 45px; } #tbc_green { color: #7da33c; background: #ecf2d6 url('/wp-content/themes/dux/diy/img/tbc_green.png') -1px -1px no-repeat; border: 1px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 45px; } #tbc_yellow { color: #ad9948; background: #fff4b9 url('/wp-content/themes/dux/diy/img/tbc_yellow.png') -1px -1px no-repeat; border: 1px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 45px; } #tbc_pink { color: #c66; background: #ffecea url('/wp-content/themes/dux/diy/img/tbc_pink.png') -1px -1px no-repeat; border: 1px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 45px; } #tbc_gray { color: #556B2F; background: #eaeaea url('/wp-content/themes/dux/diy/img/tbc_gray.png') -1px -1px no-repeat; border: 1px solid #c8c8c8; overflow: hidden; margin: 10px 0; padding: 15px 45px; border:1px solid #ccc; padding:4px; }
  • 将以上样式替换之前第一版的即可(位置在主题的style.css内)
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-06-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档