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,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
随机推荐
- swapper_pg_dir主内核页表、init和kthreadd、do_fork时新建子进程页表、vmalloc与kmalloc
都是以前看到一个点扯出的很多东西,当时做的总结,有问题欢迎讨论,现在来源难寻,侵删! 1.Init_task.idle.init和kthreadd的区别和联系 idle进程其pid=0,其前身是系统创 ...
- Jquery回到顶部效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- 51Nod 1185 威佐夫游戏 V2
有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆中取任意个或从2堆中取相同数量的石子,但不可不取.拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出2堆石子的数量, ...
- TPS54331 TPS54332 3.5V to 28V Input, 3A, 570kHz Step-Down Converter with Eco-mode
The TPS54331 is a 28-V, 3-A non-synchronous buck converter that integrates a low RDS(on) high side M ...
- git将本地项目上传码云
1.首先在码云新建项目. 2.使用git bash工具,进入本地项目所在的文件夹. 3.执行命令 git init,初始化本地git仓库 4.执行命令 git remote add [short-na ...
- TASE2017
PATTERN系列之五 I. Introduction To ease the expression of real-time requirements, Dwyer, and then Konrad ...
- Learning-Python【23】：面向对象三大特性
继承 封装 多态
- es6 class的基本语法
ES5以及之前的版本,没有类的概念,但是聪明的JavaScript开发者,为了实现面向对象,创建了特殊的近类结构. ES5中创建类的方法:新建一个构造函数,定义一个方法并且赋值给构造函数的原型. 'u ...
- ES5 map循环一大坑：循环遍历竟然出现逗号！
一.map map大法好 这里需要解释一下Map和forEach的区别 一般来说需要返回值时使用Map,而只需要循环的使用forEach map循环常用的一些方法 /********* ES6 *** ...
- ceph储存的S3接口实现（支持断点续传）
最近公司准备接ceph储存,研究了一番,准备用亚马逊的s3接口实现,实现类如下: /** * Title: S3Manager * Description: Ceph储存的s3接口实现,参考文档: * ...