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

2023-05-16 13:26:06 浏览数 (1)

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

参考日主题,发现圆角用的美轮美奂,整个站点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内)

0 人点赞