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,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
随机推荐
- Java IO--NIO（一）
一.基本概念描述 1.1 I/O简介 I/O即输入输出,是计算机与外界世界的一个接口.IO操作的实际主题是操作系统.在java编程中,一般使用流的方式来处理IO,所有的IO都被视作是单个字节的移动,通 ...
- git的基本用法
作业要求来自https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 一:以下是git的基本使用方法: 1:首先先进行账号注册. 2:然 ...
- Linux笔记 #09# Tomcat多开以及Nginx负载均衡简单例子
索引 Tomcat怎样多开.. 1.添加环境变量(最基础.关键的步骤!) 2.改catalina.sh 3.改相关端口 Nginx负载均衡简单例子 Tomcat怎样多开.. 演示一下如何开两个(开n个 ...
- Vue基础进阶 之 自定义指令
自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...
- Python socket ssh接收大数据
通过socket连续接收返回数据 Server服务端 import socket,os server = socket.socket() server.bind(('localhost',9999)) ...
- 国服最强JWT生成Token做登录校验讲解，看完保证你学会！
转载于:https://blog.csdn.net/u011277123/article/details/78918390 Free码农 2017-12-28 00:08:02 JWT简介 JWT(j ...
- kubeflow 创建tensorflow过程
online deployable ,install k8s 代码 Kubeflow有三个核心组件 TFJob Operator 和 Controller: 作为Kubernetes的扩展,来简化分布 ...
- jsp/servlet学习二之servlet详解
Servlet API概览 Servlet API有一下四个java包: 1,javax.servlet,其中包含定义servlet和servlet容器之间契约的类和接口. 2,javax.servl ...
- Qt下拉对话框 ComboBox的用法
介绍 ComboBox是Qt的下拉菜单的一个控件,通过下拉菜单选择不同的选项,样式如图: 基本用法 m_ComBox = ui.comboBox; //设置默认显示值的索引,从0开始 m_ComBox ...
- NodeJS：（二）基础常用API
node.js中文网:http://nodejs.cn/api/ (path.Buffer.events.fs) ①path路径-----const {resolve} = require('path ...