• css3半圆


    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
            div {
                margin-bottom: 30px;
                margin-left: 30px;
            }
    
            /* 上半圆 */
    
            .semi-circle {
                width: 100px;
                height: 50px;
                background-color: #cb18f8;
                border-radius: 50px 50px 0 0;
                /* 左上、右上、右下、左下 */
            }
    
            /* 下半圆 */
    
            .semi-circle2 {
                width: 100px;
                height: 50px;
                background-color: #cb18f8;
                border-radius: 0 0 50px 50px;
                /* 左上、右上、右下、左下 */
            }
    
            /* 左半圆 */
    
            .semi-circle3 {
                width: 50px;
                height: 100px;
                background-color: #cb18f8;
                border-radius: 50px 0 0 50px;
                /* 左上、右上、右下、左下 */
            }
    
            /* 右半圆 */
    
            .semi-circle4 {
                width: 50px;
                height: 100px;
                background-color: #cb18f8;
                border-radius: 0 50px 50px 0;
                /* 左上、右上、右下、左下 */
            }
    
            /* 椭圆 */
    
            .semi-circle5 {
                width: 100px;
                height: 100px;
                border-radius: 100px 0px 100px 0px;
                background: green;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
            }
    
            .semi-circle6 {
                border-radius: 100px 0 0;
                width: 50px;
                height: 50px;
                background-color: aquamarine;
            }
        </style>
    </head>
    
    <body>
        <div class="semi-circle"></div>
        <div class="semi-circle2"></div>
        <div class="semi-circle3"></div>
        <div class="semi-circle4"></div>
        <div class="semi-circle5"></div>
        <div class="semi-circle6"></div>
        <p>扇形原理:左上角是圆角,其余三个角都是直角:左上角的值为宽和高一样的值,其他三个角的值不变(等于0)。</p>
    </body>
    
    </html>

    效果图:

  • 相关阅读:
    Python (一)Tkinter窗口组件:Label
    Python (八)Tkinter窗口组件:Scrollbar
    Python (四)Tkinter窗口组件:Radiobutton
    Python (五)Tkinter窗口组件:LabelFrame
    Python (三)Tkinter窗口组件:Checkbutton
    Scrapy安装及相关知识点概括
    Python (九)Tkinter窗口组件:Scale
    Python (六)Tkinter窗口组件:Entry
    电脑通过蓝牙适配器连接手机与蓝牙耳机之经验
    Noi2018 归途
  • 原文地址:https://www.cnblogs.com/huanghuali/p/9529675.html
Copyright © 2020-2023  润新知