这里主要运用了三个属性，border-radius，text-shadow，transition。 关于transition属性，是CSS3中三个动画相关的属性之一，transition属性允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”，它的属性有(1).执行变换的属性：transition-property,(2).变换延续的时间：transition-duration,(3).在延续时间段，变换的速率变化transition-timing-function,(4).变换延迟时间transition-delay。
下附源码，可直接使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
.cont{width: 450px;height: 450px;margin: 0 auto;margin-top: 45px;font-family: "微软雅黑";font-size: 14px;}
.cont ul{width: 450px;margin: 0px;padding: 0px;list-style: none;}
.cont ul li{width: 450px;height: 50px;background: #fff;text-align: center;line-height: 50px;}
.cont ul li a{width: 450px;height: 50px;color: #333;display: block;font-size: 25px;}
.cont ul li a:hover{
background: #99dd33;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
a {
/*只有当鼠标移出后才处理*/
-webkit-transition:background 0.2s linear 0s;
-moz-transition:background 0.2s linear 0s;
-ms-transition:background 0.2s linear 0s;
-o-transition:background 0.2s linear 0s;
transition:background 0.2s linear 0s;
text-decoration: none;
}
a:hover {
background:#99dd33; color:#f60;
-webkit-text-shadow:2px 2px 10px #f00;
-moz-text-shadow:2px 2px 10px #f00;
-ms-text-shadow:2px 2px 10px #f00;
-o-text-shadow:2px 2px 10px #f00;
text-shadow:2px 2px 10px #f00;
/* 只有当鼠标移入时才处理
注：若a:hover中不写transition,则会继承a中的transition */
/*
1. 单个属性
-webkit-transition:background 0.5s ease-out 0s;
2. 多个属性：
-webkit-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;
*/
-webkit-transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
-moz-transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
-ms-transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
-o-transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
}
</style>
</head>
<body>
<div class="cont">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">YUI</a></li>
<li><a href="#" class="li">Python</a></li>
</ul>
</div>
</body>
</html>
来源：https://www.cnblogs.com/csblog/p/4263054.html