这是一个CSS3效果，如果看不到立体效果，请选用火狐 、Chrome等浏览器，IE8下看不到效果的。CSS3逐渐流行，比传统CSS功能更加强，性能更高，期待与大家一起研究CSS3技术。CSS3实现立体按钮轻易而举的事情。
<!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>CSS3实现的立体按钮</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
article,aside,figure,footer,header,hgroup,menu,nav,section{display:block;}
a{background-color:#DB5705;border-radius:8px 8px 8px 8px;box-shadow:0 9px 0 #DB1F05,0 9px 25px rgba(0,0,0,0.7);color:#FFFFFF;display:block;font-family:'微软雅黑';font-size:42px;font-weight:700;margin:100px auto;padding:4px;position:relative;text-align:center;text-decoration:none;transition:all 0.1s ease 0s;width:260px;}
a:active{box-shadow:0 3px 0 #DB1F05,0 3px 6px rgba(0,0,0,0.9);position:relative;top:6px;}
</style>
</head>
<body>
<p id="hello">Hello OSTools</p>
<a href="#">前端工程师</a>
<script type="text/javascript">
if(document.getElementById('hello')){
document.getElementById('hello').innerHTML='Hello ostools - this was inserted using JavaScript';
}
</script>
</body>
</html>效果图：
448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
