如何使用纯 CSS（border-radius 和 clip）属性画出半圆

最新推荐文章于 2024-04-12 22:35:54 发布

青颜的天空

最新推荐文章于 2024-04-12 22:35:54 发布

阅读量4.1k

点赞数

分类专栏： CSS 文章标签： css 半圆

本文链接：https://blog.csdn.net/a1056244734/article/details/120266485

版权

CSS 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

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>

效果：
border-radius画半圆
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>

效果：
clip

参考文章：
CSS半圆怎么画？

青颜的天空

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
如何使用纯 CSS（border-radius 和 clip）属性画出半圆

1、使用border-radius画半圆把div高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设置为0。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; }
复制链接

扫一扫