好了，进入正题了哟——
- Tutorial requested by KC -
还没介绍各种类型的美化方法时，先给大家知道一下，若要美化小工具标题的话，要将代码添加在 h2 {...} 里面哟。记住了哟。
类型 1 - 为小工具标题添加分割线
text-align: center;
background: url(图片url) no-repeat left;
padding-top: 3px;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 15px;
蓝色代码：分割线的图片 url
紫色代码：字体的位置（left / center / right）
紫色代码：调整数目的大小来调整你的分割线还有标题的位置
类型 2 - 为小工具添加特别的背景
.jpg)
background: #CCC1BA;
text-align: center;
padding: 3px;
line-height: 3px;
margin-top: 10px;
margin-bottom: 10px;
font-size: 19px;
红色代码：背景的颜色 / 图片的 url
类型 3 - 为小工具标题添加框框
.jpg)
background: #fecdc9;
padding: 5px;
text-align: center;
border: 2px solid #ccc;
margin-bottom: 15px;
红色代码：背景的颜色 / 也可以改成图片哟
蓝色代码：标题的位置（left / center / right）
紫色代码：边框的粗度 / 类型 / 颜色代码）
青色代码：标题距离内容的距离
类型 4 - 为小工具标题添加形状框框
.jpg)
background: #fecdc9;
padding: 5px;
text-align: center;
border: 2px solid #ccc;
margin-bottom: 15px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
红色代码：背景的颜色 / 也可以改成图片哟
蓝色代码：标题的位置（left / center / right）
紫色代码：边框的粗度 / 类型 / 颜色代码）
青色代码：标题距离内容的距离
橙色代码：形状框框的代码（可查询此帖）
先提供几款美化小工具标题的方法。等我再找到更多的 idea 的时候，会分享给大家哟。对了，以上提供的代码都只是针对我 capture 的图的设计提供的，当然啦，你们也可以在自己添加自己想要的效果。例如更换字体类型 / 大小 / 颜色等等等，都可以自己添加噢。希望此教程会带给你们更多的想法，码字愉快 !!
Categories: Bii の語法筆記, 關於小工具
