点击变色的圆球
李涛2019-01-20 00:17:58260<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS边框总结</title>
<link rel="shortcut icon" type="image/x-icon" href="../xuexi/static/images/08131844.jpg"/>
<link rel="stylesheet" type="text/css" href="../xuexi/static/css/css2.css"/>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body{
background-color:tan;
}
.box{
width: 500px;
height: 300px;
border: 1px solid #ccc;
margin: 0 auto;
margin-top: 20px;
border-radius: 15px;
box-shadow:10px 10px 3px #cccc;
background-color:orange;
}
#boxa{
width: 120px;
height: 120px;
background-color:darkviolet;
border-radius: 60px;
margin: 80px;
box-shadow:0px 6px 30px #ccc inset;
text-align: center;
}
#boxa1{
padding:40px;
color:yellow;
font-weight: bold;
font-size: 20px;
}
#boxa:hover{
background-color: fuchsia;
box-shadow:10px 5px 3px rgb(199, 228, 207);
}
</style>
</head>
<body>
<div class="box">
<div id="boxa">
<div id="boxa1">圆球</div>
</div>
</div>
</body>
</html>