Safari CSS3 Fun - target + border-radius + box-shadow

<style type="text/css">
#r, #g, #b {
  position:relative;
  margin:0 auto;
  margin-top:20px;
  width:30px;
  height:30px;
  display:block;
 
  -webkit-border-radius: 15px;
}
 
#r {
  -webkit-box-shadow: 1px 1px 1px red;
  background-color:red;
}
 
#r:hover {
 
  -webkit-box-shadow: 2px 2px 40px red;
}
 
#g {
  -webkit-box-shadow: 1px 1px 1px green;
  background-color: green;
}
 
#g:hover {
  -webkit-box-shadow: 2px 2px 40px green;
}
 
#b {
  -webkit-box-shadow: 1px 1px 1px blue;
  background-color: blue;
}
 
#b:hover {
  -webkit-box-shadow: 2px 2px 40px blue;
}
 
#a {
  margin:30px;
  width:60px;
  height:170px;
  border:1px #666 solid;
  -webkit-box-shadow: 4px 4px 10px #666;
  -webkit-border-radius: 5px;
}
 
#rgb {
  position:absolute;
  left:140px;
  top:10px;
  font-size:150px;
  font-family:"Arial Black";
  letter-spacing:10px;
}
 
#red, #green, #blue {
  opacity:0.8;
}
 
 
#red:hover, #green:hover, #blue:hover {
  opacity:1;
}
 
 
#red:target {
  opacity:1;
  text-shadow:4px 0px 20px red;
}
 
#green:target {
  opacity:1;
  text-shadow:4px 0px 20px green;
}
 
#blue:target {
  opacity:1;
  text-shadow:4px 0px 80px blue;
}
 
#red a::selection {
  background-color:red;
  color:white;
}
 
#green a::selection {
  background-color: green;
  color:white;
}
 
#blue a::selection {
  background-color: blue;
  color:white;
}
 
a {
 text-decoration:none;
 color: inherit;
}
</style>
 
<div id="a">
  <a href="#red" title="Red" id="r"></a>
  <a href="#green" title="green" id="g"></a>
  <a href="#blue" title="blue" id="b"></a>
</div>
 
<div id="rgb">
<span id="red"><a href="#red">R</a></span><span id="green"><a href="#green">G</a></span><span id="blue"><a href="#blue">B</a></span>
</div>