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

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

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

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

效果

/** 网站圆角样式集合 **/
#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内）

微信扫描下方的二维码阅读更多精彩内容

放开

八卦形成

年少中得一物

西式插花基础造型——倒T形插花步骤详解

人终被年少不可得之物困其一生

OpenWrt忘记密码，如何重置密码

20220405

看图学花艺——韩式风格花艺作品