zoukankan      html  css  js  c++  java
  • 利用border-radious画图形

    今天才发现,border-radius可以画很多图形,下面跟我来看一下吧:

    在设有宽和高的情况下画一个圆:

     #div1{
            /*宽高相等,圆角范围为高或宽的一半或以上*/
                background-color: green;
                 120px;
                height: 120px;
                border-radius: 60px;
            }

    运行结果:

    宽和高不相等的时候:

     #div1{
                /*宽大于高,圆角范围为宽的一半或以上*/
                background-color: green;
                 120px;
                height: 80px;
                border-radius: 60px;
            }

    结果:

    因为border-radius可以接受不同的参数,我们可以利用这个画一个椭圆

    #div1{
                /*border-radius接受水平和垂直方向不同的值,用/隔开*/
                background-color: green;
                 120px;
                height: 80px;
                border-radius: 60px/40px;
            }

    结果:

    一个椭圆就出现了。

    以上的方法画圆和椭圆很不灵活,如果宽度和高度改变,形状也会发生改变,我们想用灵活的方式画出我们想要的图形,就要用到百分比了:

    #div1{
                /*border-radius接受百分比,用/隔开  灵活的椭圆*/
                background-color: green;
                 200px;
                height: 300px;
                /*等同于border-radius: 50%/50%;*/
                border-radius: 50%;
            }

    结果:

    还可以通过修改border-radius的值实现半个圆或椭圆的图形:

     #div1{
                /*border-radius半椭圆*/
                background-color: green;
                 100px;
                height: 100px;
            /*等同于border-radius: 水平半径/垂直半径;*/
                border-radius: 50%/100% 100% 0 0;
            } 

    运行结果:

    #div1{
                /*border-radius半椭圆*/
                background-color: green;
                 100px;
                height: 100px;
                /*等同于border-radius: 水平半径/垂直半径;*/
                border-radius: 100% 0 0 100%/50%;
            }

    结果:

    四分之一的椭圆也是可以的哦:

     #div1{
                /*border-radius 1/4半椭圆*/
                background-color: green;
                 100px;
                height: 100px;
                /*等同于border-radius: 水平半径/垂直半径;*/
                border-radius: 100%  0 0 0/100%;
            }

    结果:

    #div1{
                /*border-radius 1/4半椭圆*/
                background-color: green;
                 100px;
                height: 100px;
                /*等同于border-radius: 水平半径/垂直半径;*/
                border-radius: 0 0 100% 0/100%;
            }

    结果:

    绘制其他图形

     #div1{
                /*border-radius半椭圆*/
                background-color: green;
                 100px;
                height: 100px;
                /*等同于border-radius: 水平半径/垂直半径;*/
                border-radius: 100% 0 100% 0/50%;
            }

     #div1{
                /*border-radius半椭圆*/
                background-color: green;
                 100px;
                height: 100px;
                /*等同于border-radius: 水平半径/垂直半径;*/
                border-radius: 0 100% 0 100% /100%;
            }

    运行结果:

     #div1{
                /*border-radius半椭圆*/
                background-color: green;
                 100px;
                height: 100px;
                /*等同于border-radius: 水平半径/垂直半径;*/
                border-radius: 50% 50% 50% 0/50%;
            }

    大家可以自己修改border-radius的值去看看会产生哪些图形,这里我就不再写了。

  • 相关阅读:
    如何获取一个进程的内存并监控
    js 如何全部替代一个子串为另一个子串
    在服务端应用中如何获得客户端 IP
    在前端开发中,如何获取浏览器的唯一标识
    JavaScript的数据结构快速学-链表的实现
    Si7006主要面向传统上使用的分立RH / T传感器的低精度的应用
    NRF52840与NRF52832的性能区别
    RFX2401C与RFX2402E的区别
    关于SI4432数据手册的简单讲解
    ESP32-DOWDQ6蓝牙&Wifi 两个可单独控制的 CPU 内核
  • 原文地址:https://www.cnblogs.com/hongxuejiao/p/4858659.html
Copyright © 2011-2022 走看看