点击变色的圆球

Original 2019-01-20 00:17:58 260
abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <title>CSS边框总结</title>     <link rel=&q
<!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>

Correcting teacher:韦小宝Correction time:2019-01-20 09:22:47
Teacher's summary:案例想的很不错 很简单基础的一个小案例 课后没事要记得多练习哦

Release Notes

Popular Entries