【CSS】实现圆、二分之一、四分之一圆

最近项目重构，其中有个模块涉及到的交互全改了，跟css挂钩的点很多，这里简单做个记录。

要实现圆首先得知道border-radius这个属性，引用MDN上的解释：

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。

简单来说就是边框的四个角是由这个属性控制的。如果边框需要圆角就可以直接设置，比如：

border-radius: 30px;

效果如下：

当然，这四个边的圆角也可以自由组合设置，这里就不一一举例了。

一、圆

width: 100px;
height: 100px;
border-radius: 50%; // 等同于 border-radius: 50px;

效果如图：（宽100px，高100px）

需要注意的一点是，这里的宽高必须一致哦，否则出来的就是一个椭圆了。

就像下面这样：（宽100px，高50px）

二、二分之一圆（半圆）

border-radius是简写属性，其完整的属性如下：

border-radius: 30px;/* 等价于： */border-top-left-radius:     30px; // 左上角
border-top-right-radius:    30px; // 右上角
border-bottom-right-radius: 30px; // 右下角
border-bottom-left-radius:  30px; // 左下角

注意：每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

上半圆

border-radius: 100px 100px 0 0;
width: 100px;
height: 50px;

效果如图：

右半圆

border-radius: 0 50px 50px 0;
width: 50px;
height: 100px;

效果如图：

下半圆

border-radius: 0 0 100px 100px;
width: 100px;
height: 50px;

效果如图：

左半圆

border-radius: 50px 0 0 50px;
width: 50px;
height: 100px;

效果如图：

三、四分之一圆

在绘制半圆时，我们设置的是两个角，那么，四分之一圆只需设置一个角即可。

左上

border-top-left-radius: 50px;
width: 50px;
height: 50px;

效果如图：

右上

border-top-right-radius: 50px;
width: 50px;
height: 50px;

效果如图：

右下

border-bottom-right-radius: 50px;
width: 50px;
height: 50px;

效果如图：

左下

border-bottom-left-radius: 50px;
width: 50px;
height: 50px;

哦啦，本文主要是介绍了几个相对来说比较常见的圆的图形，至于其他的，后面遇到再继续补充吧。

【CSS】实现圆、二分之一、四分之一圆相关推荐

CSS画出半圆，四分之一圆，三角等图形
圆形 .icon{width: 100px;height: 100px;background: red;border-radius: 50%;} 半圆 .icon{width: 100px;heigh ...
CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）
CSS绘制形状(三角形.四分之一圆.半圆.圆.梯形.球体.菱形) 三角形 div {width: 0;height: 0;border: 200px solid transparent;border- ...
CSS中四分之一圆的写法
关于百度前端学院中task4四分之一圆的画法(基于CSS中画圆角的方法) 方法一: 设置宽高为100px,border-radius设置为50%(当然这里也可以设置为50px) width:100px ...
css 实现半圆与四分之一圆
半圆的css 控制 border-radius 与宽高,来设置圆的方向. div {width:10px;height: 20px;background-color: pink;border-ra ...
CSS学习之圆、半圆、四分之一圆以及三角形的创建
1.圆的创建下面这段代码用来实现圆的创建 <style>div.cri {background-color: red;width: 200px;height: 200px;border- ...
css多种方法画四分之一圆曲线
写这道题是之前面试时碰到的题目,在这给大家分享几种画四分之一圆曲线方法: 1.设置上.右边框,然后对右上角设置圆角 width: 100px;height: 100px;border-top:1px ...
html_css_四分之一圆
需求: 效果: 代码: <!DOCTYPE html> <html> <head><title>四分之一圆</title><style ...
uva 11978 Fukushima Nuclear Blast (二分+多边形与圆交)
二分+多边形与圆交就可以了 1 //#include<bits/stdc++.h> 2 #include<iostream> 3 #include<cstdio> ...
python画四个相切的圆_如何用python绘制四分之一圆曲线
我想为我的程序画一个红色的4瓣单位: 我需要能够分别绘制每一条曲线,这样我就可以加粗它们,使大胆的白色图案在图片中显示出来.在我在想把原点坐标放在中心,然后在圆点周围画8个四分之一圆.在希望我只有 ...

【CSS】实现圆、二分之一、四分之一圆

一、圆

二、二分之一圆（半圆）

三、四分之一圆

【CSS】实现圆、二分之一、四分之一圆相关推荐

最新文章

热门文章