css做半圆的方法

这篇文章主要介绍“css做半圆的方法”，在日常操作中，相信很多人在css做半圆的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css做半圆的方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

专注于为中小企业提供成都网站制作、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业浦口免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了数千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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。









用border-radius实现半圆

上边圆
左边圆
下边圆
左边圆
全圆

效果图：

css做半圆的方法

2、使用clip属性画半圆

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

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

说明

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

示例：









css3的clip 方法剪裁实现半圆


clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。
唯一合法的形状值是：rect (top, right, bottom, left)


左半圆
右半圆

效果图：

css做半圆的方法

到此，关于“css做半圆的方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

本文名称：css做半圆的方法
文章路径：http://mswzjz.cn/article/jpejdp.html

网站建设知识