另外一种通过CSS实现按钮图片效果

另外一种通过CSS实现按钮图片效果,可以用来做一些特殊的效果,

图例:

border-radius

代码如下:

1
2
3
4
5
6
7
8
9
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #06c; background: white; color: #06c">&nbsp;W3C&nbsp;</span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #06c; background: #06c; color: white;">&nbsp;CSS&nbsp;Valid&nbsp;</span>
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid orange; background: white; color: #c60">&nbsp;RSS&nbsp;</span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid orange; background: orange; color: black">&nbsp;1.0&nbsp;</span>
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid green; background: white; color: green">&nbsp;Google&nbsp;</span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid green; background: green; color: white">&nbsp;Me&nbsp;</span>
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #006; background:#ccf; color:#006">&nbsp;MSN&nbsp;</span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #006; background:#006; color:white">&nbsp;19258390@qq.com&nbsp;</span>
<span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #dd9; background:#003; color:#ffc">&nbsp;QQ&nbsp;</span><span style="font-size: 9px; font-weight: bold; font-family: Verdana; border: 1px solid #dd9; background:#dd9; color:black;">&nbsp;19258390&nbsp;</span>