网站建设资讯

NEWS

网站建设资讯

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://cdweb.net/article/jpejdp.html