• 技术文章 >web前端 >css教程

    css怎么做半圆

    藏色散人藏色散人2021-07-10 11:24:29原创138

    css做半圆的方法:1、使用border-radius画半圆,语句如“border-radius: 50px 50px 0 0;”;2、使用clip属性画半圆,语句如“clip: rect(0px 50px 100px 0px);”。

    本文操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑

    css怎么做半圆?

    1、使用border-radius画半圆

    把div高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的圆角半径与元素的高度一致,而右下角和左下角的圆角半径设置为0。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style>
    * {
    margin: 0;
    padding: 0;
    }
    .clearfix {
    zoom: 1;
    /*为IE6,7的兼容性设置*/
    }
    .clearfix:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    ul li {
    list-style: none;
    float: left;
    margin: 50px 0 50px 20px;
    text-align: center;
    }
    li {
    background: red;
    }
    h2 {
    margin-top: 20px;
    }
    .circle1 {
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
    line-height: 50px;
    }
    .circle2 {
    width: 50px;
    height: 100px;
    border-radius: 0 50px 50px 0;
    line-height: 100px;
    }
    .circle3 {
    width: 100px;
    height: 50px;
    border-radius: 0 0px 50px 50px;
    line-height: 50px;
    }
    .circle4 {
    width: 50px;
    height: 100px;
    border-radius: 50px 0 0 50px;
    line-height: 100px;
    }
    .circle5 {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    line-height: 100px;
    }
    </style>
    </head>
    <body>
    <div>
    <h2>用border-radius实现半圆</h2>
    <ul class="clearfix">
    <li class="circle1">上边圆</li>
    <li class="circle2">左边圆</li>
    <li class="circle3">下边圆</li>
    <li class="circle4">左边圆</li>
    <li class="circle5">全圆</li>
    </ul>
    </div>
    </body>
    </html>

    效果图:

    de391d5097172f508f48dbfe85de330.png

    2、使用clip属性画半圆

    clip 属性剪裁绝对定位元素。

    当一幅图像的尺寸大于包含它的元素时会发生什么呢?"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。

    说明

    这个属性用于定义一个剪裁矩形。对于一个绝对定义元素,在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大,也可能比内容区小。

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style>
    * {
    margin: 0;
    padding: 0;
    }
    .clearfix {
    zoom: 1;
    /*为IE6,7的兼容性设置*/
    }
    .clearfix:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    ul li {
    list-style: none;
    float: left;
    margin: 50px 0 50px 20px;
    text-align: center;
    }
    li {
    background: red;
    }
    h2 {
    margin-top: 20px;
    }
    .demo {
    /*左半圆*/
    position: absolute;
    /*clip 属性剪裁绝对定位元素。也就是说,只有 position:absolute 的时候才是生效的。*/
    width: 100px;
    height: 100px;
    border-radius: 50px;
    /* line-height: 50px; */
    clip: rect(0px 50px 100px 0px);
    /*唯一合法的形状值是:rect (top, right, bottom, left)*/
    }
    .right-circle {
    /*右半圆*/
    left: 200px;
    clip: rect(0px 100px 100px 50px);
    /*唯一合法的形状值是:rect (top, right, bottom, left)*/
    }
    </style>
    </head>
    <body>
    <div>
    <h2>css3的clip 方法剪裁实现半圆</h2><br />
    <p style="color: red;">
    clip 属性剪裁绝对定位元素。也就是说,只有 position:absolute 的时候才是生效的。
    唯一合法的形状值是:rect (top, right, bottom, left)
    </p>
    <ul class="clearfix" style="position: relative;">
    <li class="demo">左半圆</li>
    <li class="demo right-circle">右半圆</li>
    <li></li>
    </ul>
    </div>
    </body>
    </html>

    效果图:

    21bb31b0014da543c5496cff1544d77.png

    推荐学习:《css视频教程

    以上就是css怎么做半圆的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:网页设计css样式代码大全,快来收藏吧! 下一篇:css样式怎么实现超出隐藏
    VIP会员

    相关文章推荐

    • 手把手教你使用CSS自定义好看的滚动条样式!• css中id选择器和class选择器有何不同• 入门级了解CSS知识体系• css怎么消除默认样式

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网