这里将给大家介绍一种仅仅通过文本CSS效果来实现这种按钮图片的方式，比起前者，更加简单、灵活、方便！
【演示】
W3C CSS Valid RSS 1.0 Google Me
MSN huangmj@mx.cei.gov.cn QQ 379945116
【HTML代码】
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #06c; background: white; color: #06c"> W3C </span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #06c; background: #06c; color: white;"> CSS Valid </span>
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid orange; background: white; color: #c60"> RSS </span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid orange; background: orange; color: black"> 1.0 </span>
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid green; background: white; color: green"> Google </span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid green; background: green; color: white"> Me </span>
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #006; background:#ccf; color:#006"> MSN </span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #006; background:#006; color:white"> huangmj@mx.cei.gov.cn </span>
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #dd9; background:#003; color:#ffc"> QQ </span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #dd9; background:#dd9; color:black;"> 379945116 </span>
【说明】
v 必须在html编辑状态下编辑代码。
v 每个按钮都是由两个Span元素构成。
v Span元素通过Style属性控制样式，主要设置如下：
font-size（字体大小）：数值；
font-weight（字体粗细）：normal、bold、bolder、lighter；
font-family（字体类型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆；
background（背景颜色）：色彩代码；
color（字体颜色）：色彩代码；
border（边框）、border-top（上边框）、border-bottom（下边框）、border-left（左边框）、border-right（右边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；
|
