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,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
随机推荐
- sql 存储过程参数为空则不作为条件
/****** Object: StoredProcedure [dbo].[GetCommonGroupByRegion] Script Date: 03/23/2017 17:31:18 **** ...
- [macOS] Cannot find libz when install php56
After upgraded to 10.12 and xcode8.2, when updating php with homebrew, i got these errors: /usr/loca ...
- python 构造一个可以返回多个值的函数
为了能返回多个值,函数直接return 一个元组就行了 看上去返回了多个值,实际上是先创建了一个元组然后返回的.这个语法看上去比较奇怪,实际上我们使用的是逗号来生成一个元组,而不是用括号 >&g ...
- 基于Vue的Quasar Framework 介绍 这个框架UI组件很全面
基于Vue的Quasar Framework 介绍 这个框架UI组件很全面 基于Vue的Quasar Framework 中文网http://www.quasarchs.com/ quasarfram ...
- week_one-python基础 列表 增删改查
# Author:larlly #列表增删改查#定义列表name = ["wo","ni","ta","wo"] #定义 ...
- 【awk】提取文件第一列
生信数据文件一般是按列分开的,如果我们只想简单的提取一列而不是费尽周折写个程序提取哪一列的话,awk作为一个非常好用的文档处理工具,我们现在来简单看一下他的一些功能: awk '{print $1}' ...
- Docker Kubernetes 命令行创建容器
Docker Kubernetes 命令行创建容器 环境: 系统:Centos 7.4 x64 Docker版本:18.09.0 Kubernetes版本:v1.8 管理节点:192.168.1.79 ...
- Python3 tkinter基础 Menubutton 点击按钮出现下拉菜单
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- git如何撤销git add操作?
答: 使用git reset <file name>即可撤销
- 全局解释器锁GIL & 线程锁
1.GIL锁(Global Interpreter Lock) Python代码的执行由Python虚拟机(也叫解释器主循环)来控制.Python在设计之初就考虑到要在主循环中,同时只有一个线程在执行 ...