1、半圆

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>半圆角</title>

    <style type="text/css">

        div{

            width: 100px;

            height: 50px;

            border:1px solid black;

            background-color: blue;

            border-radius: 100px 100px 0 0;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

结果：

2、圆

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>圆</title>

    <style type="text/css">

        div{

            width: 100px;

            height: 100px;

            border:1px solid black;

            background-color: blue;

            border-radius: 50px;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

结果：

css实现半圆和圆的更多相关文章

  1. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  2. 用css实现一个空心圆，并始终放置在浏览器窗口左下角

    用css实现一个空心圆,并始终放置在浏览器窗口左下角         div{                 position:fixed;                 bottom:0;   ...

  3. html、css如何画实心圆

    css3画实心圆 实现方法相当简单,css代码如下: .circle{ width:100px; height:100px; border-radius:50px; /* 图形的半径 */ }

  4. css3实现半圆和圆效果

    在css2中,如果需要失效一些圆角或者半圆等等效果,一般是要通过ps等软件来处理的,在CSS3中,则不需要了,只需要通过border-radius就可以实现,大大方便了开发的效率. 无论圆角.圆弧.实 ...

  5. CSS 画三角形、圆

    <div class="square"></div> <style> .square { height: 0px; width: 0px; bo ...

  6. CSS动画实例：圆的涟漪扩散

    设页面中有<div class="circle "></div>,定义.circle的样式规则绘制一个半径为75px,边框厚度为4px的圆,再定义关键帧,使 ...

  7. css实现半圆效果

    效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. css 空心圆

    用css实现一个空心圆,并始终放置在浏览器窗口左下角        div{                position:fixed;                bottom:0;      ...

  9. CSS制作图形速查表

    很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...

随机推荐

  1. 最小生成树模板题 hpu 积分赛 Vegetable and Road again

    问题 H: Vegetable and Road again 时间限制: 1 Sec 内存限制: 128 MB 提交: 19 解决: 8 题目描述 修路的方案终于确定了.市政府要求任意两个公园之间都必 ...

  2. Scrapy框架的学习(6.item介绍以及items的使用（提前定义好字段名）)转载https://blog.csdn.net/wei18791957243/article/details/86259688

      在Scrapy框架中的items.py的作用   1.可以预先定义好要爬取的字段     items.py import scrapy     class TencentItem(scrapy.I ...

  3. Python记录13：软件开发目录规范

    软件开发目录规范 开发一个软件,一个工程项目,一般应该具备以下的几个基本的文件夹和模块,当然,这并不是一成不变的,根据项目的不同会有一定的差异,不过作为一个入门级的新手,建议暂时按照以下的规范编写: ...

  4. CentOS 7 之 Systemd 入门教程：命令篇

    Systemd 是 Linux 系统工具,用来启动守护进程,已成为大多数发行版的标准配置 历史上,Linux 的启动一直采用init进程 下面的命令用来启动服务 [root@DaMoWang ~]# ...

  5. bitbucket迁移

    bitbucket 迁移 1.停止向旧仓库地址提交代码 [dev]2.导入代码至新仓库地址 [op]3.修改本地仓库地址 第一种方式:git remote set-url origin [url] ; ...

  6. aliplayer 视频播放报错

    问题总结: 1.引用 阿里库时href和src 文件路径不加http <link rel="stylesheet" href="//g.alicdn.com/de/ ...

  7. 关于ComponentOne For WinForm 的全新控件 – DataFilter数据切片器（Beta）

    概述 数据切片器在电子商务网站上很常见 - 它们可以帮助用户快速过滤所选商品,并且所有过滤选项都可以在一个地方使用,通常包含核心控件类型为:清单,范围栏和单选按钮等.在ComponentOne For ...

  8. 使用SpotBugs/FindBugs进行代码检查

    原po:https://blog.csdn.net/zhangb00/article/details/8407070 SpotBugs 介绍 SpotBugs是Findbugs的继任者(Findbug ...

  9. loj#3 -Copycat

    原题链接:https://loj.ac/problem/3 题目描述: --- Copycat 内存限制:256 MiB 时间限制:1000 ms 输入文件: copycat.in 输出文件: cop ...

  10. robot framework学习五——AutoltLibrary库

    安装中遇到的问题: 安装好了AutoItLibrary,但是导入到RIDE后,仍然红色显示 搜索了下解决办法,说要安装下autoit-v3-setup.exe https://www.autoitsc ...