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内）

版权声明 1 本网站名称：钻芒博客
2 本站永久网址：www.zuanmang.net
3 本站原创内容转载请注明出处，付费内容未经本站授权禁止转载二次发布
4 本站所有内容禁止用于任何非法用途！部分文章、素材、资源软件来自网络，仅供大家学习与参考。如有侵权，请联系站长进行删除处理
5 本站投稿禁止发布任何违法内容，如发现将立即封号处理，欢迎举报监督
6 本站附件资源、教程等内容如因时效原因失效或不可用，请联系留言或联系站长及时更新

THE END