纯CSS实现半圆、1/4圆

最新推荐文章于 2023-02-15 17:00:52 发布

骆小胖

最新推荐文章于 2023-02-15 17:00:52 发布

阅读量7.8k

点赞数 1

分类专栏：笔记随笔 CSS 常见特效教学笔录文章标签：笔记随笔 CSS 常见特效教学笔录

本文链接：https://blog.csdn.net/qq_42445490/article/details/88819076

版权

75 篇文章 0 订阅

订阅专栏

73 篇文章 0 订阅

订阅专栏

29 篇文章 0 订阅

订阅专栏

【前言】

本文简单介绍下实现半圆、1/4圆的几种方案

【主体】

（1）半圆

实现原理：border两个方向的值的设定

1、下半圆

<div class="area"></div>
.area{
	width: 100px;
	height: 50px;
	background: red;
	border-radius: 0px 0px 100px 100px;
}

2、上半圆

3、左半圆

4、右半圆

（2）1/4圆

实现原理：border四个方向的值的设定---上右下左

1、左上角1/4圆

<div class="area"></div>
.area{
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 100px 0px 0px 0px;
    margin: 10px;
}

2、右上角border-radius: 0px 100px 0px 0px;

3、左下角border-radius: 0px 0px 100px 0px;

4、右下角border-radius: 0px 0px 0px 100px;

今天先写到这里，稍后继续

关注