1、半圆

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>半圆角</title>
  6.     <style type="text/css">
  7.         div{
  8.             width: 100px;
  9.             height: 50px;
  10.             border:1px solid black;
  11.             background-color: blue;
  12.             border-radius: 100px 100px 0 0;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div></div>
  18. </body>
  19. </html>

结果：

2、圆

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>圆</title>
  6.     <style type="text/css">
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.             border:1px solid black;
  11.             background-color: blue;
  12.             border-radius: 50px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div></div>
  18. </body>
  19. </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. proto 3 语法

    一.简介 proto3是新版本的protobuf语法.它简化了部分语法,并扩大了支持的语言,Ruby.C#.目前谷歌推荐只在是用新支持的语言或使用新的gRPC框架的时候使用.proto2和proto3 ...

  2. 蓝桥杯2018 B组 第九题

    #include <bits/stdc++.h> #define M 1005 using namespace std; int n; char map1[M][M]; bool vis[ ...

  3. Django框架详细介绍---模型---ORM

    一.概述 ORM(Object Relational Mapping),全称:对象关系映射,简单的说就是通过创建类.实例化出对象的方法,使得类.对象.对象的属性能够和数据库中的表.记录.字段意义对应. ...

  4. SpringMvc HandlerMappings 何时初始化？

    SpringMvc 的转发控制器 DispatcherServlet 执行 initStrategies(),在什么时候初始化 HandlerMappings ? 在容器 AbstractApplic ...

  5. Python自然语言处理笔记【一】文本分类之监督式分类

    一.分类问题 分类是为了给那些已经给定的输入选择正确的标签. 在基本的分类任务中,每个输入都被认为与其他的输入是隔离的.每个类别的标签集是预先定义好的(只有把类别划分好了,才能给输入划分类别). 分类 ...

  6. 『Numpy』np.meshgrid

    生成网格坐标,一个很好的说明图如下: 虽然xy双坐标比较常用,但实际上其输入可以是任意多的数组,输出数组数目等于输出数组数目,且彼此间shape一致. 如果输入数组不是一维的,会拉伸为1维进行计算. ...

  7. 用java 集合和映射实现文章的单词数目统计

    package 一_统计字母出现; import java.io.File; import java.io.FileNotFoundException; import java.util.HashMa ...

  8. Docker Kubernetes 创建管理 Pod

    Docker Kubernetes 容器扩容与缩容 环境: 系统:Centos 7.4 x64 Docker版本:18.09.0 Kubernetes版本:v1.8 管理节点:192.168.1.79 ...

  9. gcc、make编译

    一 arm-linux-gcc 常用参数 https://www.cnblogs.com/zhangpengshou/p/3587751.html 二 arm-linux-objdump常用参数 ht ...

  10. tomcat的systemctl启动脚本

    最近在做Tomcat的实验,顺便研究了一下tomcat的启动脚本发现一个问题,然后经过多方查阅其他大神的资料,终于解决,现在跟大家分享. tomcat的启动脚本跟别的脚本有稍微区别的原因是他需要识别J ...