CSS Safari CSS3 Fun - 目标+边框半径+框阴影

Posted 2021-05-23

<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>