zoukankan      html  css  js  c++  java
  • CSS小技巧-煎蛋的画法~

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>这是三个煎蛋</title>
            <style type="text/css">
                
                /*这是第一个煎蛋*/
                #oneegg{
                    width: 100px;
                    height: 100px;
                    border: 50px solid #FFFFCC;
                    background-color: #FFFF00;
                    border-radius: 100px;
                }
                
                /*这是第二个煎蛋*/
                #twoegg{
                    width: 200px;
                    height: 200px;
                    background-color: #FFFFCC;
                    border-radius: 100px;
                    overflow: hidden;
                }
                #twoegg .danhuang{
                    width: 100px;
                    height: 100px;
                    background-color: #FFFF00;
                    border-radius: 50px;
                    margin-top:50px ;
                    margin-left: 50px;
                }
                
                /*这是第三个煎蛋*/
                #threeegg{
                    width: 200px;
                    height: 200px;
                    background-color: #FFFF00;
                    box-shadow: 0px 0px 0px 50px #FFFFCC inset;
                    border-radius: 100px;
                }
            </style>
        </head>
        <body>
            <!--这是第一个煎蛋-->
            <div id="oneegg"></div>
            
            <!--这是第二个煎蛋-->
            <div id="twoegg">
                <div class="danhuang"></div>
            </div>
            
            <!--这是第三个煎蛋-->
            <div id="threeegg"></div>
        </body>
    </html>
  • 相关阅读:
    【poj1655】Balancing Act
    yargs.js用法
    8、typescript
    7、typescript
    6、typescript
    5、typescript
    4、typescript
    3、typescript
    2、typescript
    1、typescript
  • 原文地址:https://www.cnblogs.com/wk1102/p/6546820.html
Copyright © 2011-2022 走看看