快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

css如何实现半圆

这篇文章将为大家详细讲解有关css如何实现半圆,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

“只有客户发展了,才有我们的生存与发展!”这是创新互联公司的服务宗旨!把网站当作互联网产品,产品思维更注重全局思维、需求分析和迭代思维,在网站建设中就是为了建设一个不仅审美在线,而且实用性极高的网站。创新互联对网站建设、成都做网站、网站制作、网站开发、网页设计、网站优化、网络推广、探索永无止境。

css实现半圆的方法:首先创建一个HTML示例文件;然后在body中输入一个p标签;接着把高度height设置为宽度width的一半,并且左上角和右上角的圆角半径定义为元素的高度一致;最后将右下角和左下角的圆角半径定义为0即可实现半圆效果。

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

css怎么实现半圆?

半圆

半圆分为:上半圆、下半圆、左半圆、右半圆,我们只要学会制作某一个方向的半圆,其他方向的半圆都可以轻松实现,其原理都一样。

假如我们要制作上半圆,实现原理:把高度height设置为宽度width的一半,并且左上角和右上角的圆角半径定义为元素的高度一致,而右下角和左下角的圆角半径定义为0.

而右下角和左下角的圆角半径定义为0.


    
    半圆角
    
        p{
            width: 100px;
            height: 50px;
            border:1px solid black;
            background-color: blue;
            border-radius: 100px 100px 0 0;
        }
    
    

结果:

css如何实现半圆

实现方式:宽度、高度设置为一样,然后四角圆角半径设置为宽度、高度的一半


    
    
    
        p{
            width: 100px;
            height: 100px;
            border:1px solid black;
            background-color: blue;
            border-radius: 50px;
        }
    
    

结果:

css如何实现半圆

css的选择器有哪些

css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等

关于“css如何实现半圆”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前名称:css如何实现半圆
标题URL:http://6mz.cn/article/jheipg.html

其他资讯