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. poj 1164 深度优先搜索模板题

    #include<iostream> //用栈进行的解决: #include<cstdio> #include<algorithm> #include<cst ...

  2. 分治法——归并排序(mergesort)

    首先上代码. #include <iostream> using namespace std; int arr[11]; /*两个序列合并成一个序列.一共三个序列,所以用 3 根指针来处理 ...

  3. 【Spark-core学习之三】 Spark集群搭建 & spark-shell & Master HA

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  4. Oracle数据库管理----性能优化

    https://blog.csdn.net/yzllz001/article/details/54848513 数据库访问优化法则   要正确的优化SQL,我们需要快速定位能性的瓶颈点,也就是说快速找 ...

  5. java SE学习过程中的知识点小结（一）（很多内容过于基础，希望能帮助到学习路上的同学）————欢迎老手批评指正

    ①.把boolean测试放在括号内:例如while(x==4){}  //当然看过很多博客,里面有工作经验的工作者说以后公司可能习惯性写(4==x) ②.所有java程序都定义在类中(也是区别于C++ ...

  6. Dart编程语言入门

    Dart基础入门语法介绍,详细说明可以查看相关视频<Dart编程语言入门>. 变量与常量 变量 1.使用 var 声明变量,默认值为 null var a;//null a = 10; 2 ...

  7. postman+linux+pistache的http通信过程

    一.pistache配置 1.安装cmake[https://www.cnblogs.com/judes/p/10327638.html] 2.下载pistache[git:https://githu ...

  8. 7.26-Codeforces Round #372 (Div. 2)

    C. Plus and Square Root 链接:codeforces.com/group/1EzrFFyOc0/contest/716/problem/C 题型:构造 题意:起始数 x 为 2, ...

  9. 事件Event实现消费者模型

    import timeimport randomfrom multiprocessing import Process,Queue def consumer(q,name): while True: ...

  10. 【2.0】使用默认日志slf4j配置

    一.SpringBoot日志简介 SpringBoot使用Commons Logging进行所有内部日志记录,但底层日志实现保持开放状态.为Java Util Logging,Log4j2和Logba ...