SOURCE

<a class="test1" href="#">this is a href</a>
<br>

<a href="#" class="test2">
  this is another href
</a>
<br>
<br>
<a href="#" class="test3">book </a>

<br>
<br>
<p>
  css实现渐变，圆角，阴影等效果
</p>
<a href="#" class="test4">book</a>

<br>
<br>

<p>
  纯css实现tooltip效果
</p>
<p>
  <a href="#" class="tooltip">andy budd<span>(this website rocks)</span></a> is a web developer based in brighton england
</p>

<br>
<br>

.test1:link, .test1:visited{
  text-decoration:none;
  border-bottom:1px dotted #000;
}

.test1:hover,.test1:focus,.test1:active{
  border-bottom-style:solid;
  color:red;
  font-weight:bold;
}

/* 注意这里repeat的用法 */
.test2:link, .test2:visited{
  color:#666;
  text-decoration:none;
  background:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter5/underline1.gif)  repeat-x left bottom;
}

.test2:hover,.test2:focus,.test2:active{
  background-image:url(http://joshua0125.test.upcdn.net/jingtongcss/charpter5/underline1-hover.gif);
}


.test3{
  display:block;
  width:6.6em;
  text-align:center;
  text-decoration:none;
  border:1px solid #66a300;
  background-color:#8cca12;
  color:#fff;
  height:30px;
  line-height:30px;
}

/* css3实现圆角，反色，阴影，渐变效果 */

.test4{
  display:block;
  width:6.6em;
  text-decoration:none;
  border:1px solid #66a300;
  text-align:center;
  height: 30px;
  line-height:30px;
  background-color:#8cca12;
  color:#fff;
  border-radius:5px;
  text-shadow:2px 2px 2px #66a300; 
  box-shadow:2px 2px 2px #ccc;
  background-image:linear-gradient(#abe142,#67a400)
}



a.tooltip{
  position:relative;
}

a.tooltip span{
  display:none;
}

a.tooltip:hover span{
  display:block;
  position:absolute;
  top:1em;
  left:2em;
  width:10em;
  padding:0.2em 0.6em;
  border:1px solid #996633;
  color:#000;
  background-color:#ffff66;
}