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

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

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

  • 效果

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

/** 网站圆角样式集合 **/
#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主题为例
  • 效果
    WordPress美化-缩略图&整站添加圆角、边框、阴影-钻芒博客
  • 缩略图背景加圆角
    在主题的style.css文件内第196行样式内添加

    border-radius:10px;/*块圆角值*/

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

  • 缩略图前景(图片)加圆角
    在主题的style.css文件内第354行样式内添加
    border-radius:10px;/*块圆角值*/
    WordPress美化-缩略图&整站添加圆角、边框、阴影-钻芒博客
更新【WordPress文章添加彩色美化框及彩色按钮】一文样式
  • 效果-样式加了圆角显示和阴影效果。修复了行距更加美观。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内)