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. 查看容器IP地址

    我们可以通过以下命令查看容器运行的各种数据 docker inspect 容器名称(容器ID)  也可以直接执行下面的命令直接输出IP地址 docker inspect --format='{{.Ne ...

  2. 平常比较多实用的SQL

    创建数据库 创建之前判断该数据库是否存在 if exists (select * from sysdatabases where name='databaseName') drop database ...

  3. 【转】python虚拟环境--virtualenv

    virtualenv 是一个创建隔绝的Python环境的工具.virtualenv创建一个包含所有必要的可执行文件的文件夹,用来使用Python工程所需的包. 安装 pip install virtu ...

  4. C#简单的九九乘法表

    for(int i=1;i<10;i++) { for(int j=1;j<=i;j++) { Console.Write("{0}*{1}={2}",j,i,i*j) ...

  5. JAVA值传递之基本数据类型和引用数据类型

    #1.基本数据类型值传递 package 经典小Demo.值传递; public class Test { public static void main(String[] args) { int a ...

  6. springboot跑定时任务

    使用@Scheduled注解实现 1.在启动类上加上@EnableScheduling 开启定时任务 2.新建一个任务类,在方法上添加@Scheduled注解 @Componentpublic cla ...

  7. [c/c++] programming之路（18）、动态分配内存malloc

    一.图解堆栈 #include<stdio.h> #include<stdlib.h> #include<Windows.h> void main0(){ **]; ...

  8. 剑指offer（60）把二叉树打印成多行

    题目描述 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 题目分析 从上到下打印二叉树我们知道用队列可以实现,但是如果多行打印怎么做呢? 我们需要分割,在行与行之间进行分割.如何分割 ...

  9. this指向问题,只提供案例,不做任何分析

    希望大家在测试的道路上找到答案,阔步前行 <script type="text/javascript"> /*this指向 console.log(this); fun ...

  10. python学习-----协程

    一.协程的引入 对于单线程下,我们不可避免程序中出现io操作,但如果我们能在自己的程序中(即用户程序级别,而非操作系统级别)控制单线程下的多个任务能在一个任务遇到io阻塞时就切换到另外一个任务去计算, ...