css实现半圆和圆
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实现半圆和圆的更多相关文章
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
- 用css实现一个空心圆，并始终放置在浏览器窗口左下角
用css实现一个空心圆,并始终放置在浏览器窗口左下角 div{ position:fixed; bottom:0; ...
- html、css如何画实心圆
css3画实心圆 实现方法相当简单,css代码如下: .circle{ width:100px; height:100px; border-radius:50px; /* 图形的半径 */ }
- css3实现半圆和圆效果
在css2中,如果需要失效一些圆角或者半圆等等效果,一般是要通过ps等软件来处理的,在CSS3中,则不需要了,只需要通过border-radius就可以实现,大大方便了开发的效率. 无论圆角.圆弧.实 ...
- CSS 画三角形、圆
<div class="square"></div> <style> .square { height: 0px; width: 0px; bo ...
- CSS动画实例：圆的涟漪扩散
设页面中有<div class="circle "></div>,定义.circle的样式规则绘制一个半径为75px,边框厚度为4px的圆,再定义关键帧,使 ...
- css实现半圆效果
效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- css 空心圆
用css实现一个空心圆,并始终放置在浏览器窗口左下角 div{ position:fixed; bottom:0; ...
- CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
随机推荐
- Linux C++ IDEs
个人推荐CLion, Visual Studio, Netbeans, Eclipse CDT排名部分先后,纯属个人偏好. 还有一点需要说明的是,笔者只用这几个工具写代码,也就是用他们提供的代码提示, ...
- ECMAScript6 入门教程 初学记录let命令 块级作用域
一.基本语法-let命令 (1)ES6新增了let命令,用来声明变量.所声明的变量,只在let命令所在的代码块内有效. 循环的计数器,就很合适使用let命令.计数器i只在for循环体内有效,在循环体外 ...
- C#串口通信遇到的坑
C#串口通信中有一个DataReceived事件可以委托一个接收函数.此接收函数是运行在辅线程(secondary thread)上的.如果要在这个函数中修改主线程中的一些元素,比如UI界面上的变量的 ...
- Python 第五阶段 学习记录之----ORM
ORM: orm英文全称object relational mapping,就是对象映射关系程序,简单来说我们类似python这种面向对象的程序来说一切皆对象,但是我们使用的数据库却都是关系型的,为了 ...
- centos下载
标题: https://www.cnblogs.com/tony-brook/p/9849624.html DVD ISO:普通光盘完整安装版镜像,可离线安装到计算机硬盘上,包含大量的常用软件,一 ...
- sqlserver group by后获取其他字段（多种方法）
大家都知道用group by的话,select 后面指定的字段必须与group by后面的一致.group by 只有个别字段,如果拿出其他未分组的字段信息呢?在网上搜了下, 总结如下: 使用了gro ...
- Netty源码分析之服务端启动
Netty服务端启动代码: public final class EchoServer { static final int PORT = Integer.parseInt(System.getPro ...
- 如何利用cURL和python对服务端和web端进行接口测试
工具描述 cURL是利用URL语法在命令行方式下工作的文件传输工具,是开源爱好者编写维护的免费工具,支持包括Windows.Linux.Mac等数十个操作系统,最新版本为7.27.0,但是我推荐大家使 ...
- 使用python玩跳一跳亲测使用步骤详解
玩微信跳一跳,测测python跳一跳,顺便蹭一蹭热度: 参考博文 使用python玩跳一跳超详细使用教程 WIN10系统,安卓用户请直入此: python辅助作者github账号为:wangshub. ...
- C++读写图片数据转成Base64格式的一种方法
最近在一个项目中要实现在客户端和服务端之间传送图片文件的功能,采用了C++语言读写图片转化成Base64格式进行传输.具体代码如下: //++Base64.h #pragma once class C ...