前端内切圆

2024-08-24 14:28

文章标签 前端 frontend 内切圆

本文主要是介绍前端内切圆，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

纯css实现内凹圆形

单个透明内凹半圆：
以下就是两个div嵌套的真实效果，可以开启查看元素，调整内div层的各项数值查看对应的效果：

<div style="background-color: red; width: 300px; height: 100px; padding-top: 100px;"><div style="width: 300px; height: 100px; background: radial-gradient(circle at 50% 0, transparent 50px, yellow 0);"></div>
</div>

注：调整内层div背景样式中的各数值，可以调整半圆的直径大小、半圆的位置、边框是否虚化等，可以直接在上边实例开启查看元素查看实时效果。

关键样式代码：

background: radial-gradient(circle at 50% 0, transparent 50px, yellow 0);

解析： radial-gradient 这里有三个参数，分别表示圆形径向渐变方向 | 渐变开始 | 渐变结束。
第一个参数 circle at 50% 0 这里50%表示横向居中，0表示在顶部；circle at定义圆形径向渐变方向，也可以设置为left/right/top/bottom；
第二个参数 transparent 50px 表示从顶部中间位置开始以50像素为半径的圆开始径向渐变，数值可以调整圆的大小；
第三个参数 yellow 0) 表示径向渐变以黄色结束；后边的0最大可以取到50像素（圆的半径）对圆无影响，如果再大圆就会出现模糊效果，感兴趣的可以试试。

2.左右两个半圆实例如下：在这里插入图片描述

<div style="width: 300px;height: 200px;background: radial-gradient(circle at left,transparent 10px,  red 0) left,radial-gradient(circle at right,transparent 10px, red 0) right;background-repeat: no-repeat;background-size: 50% 100%;">
</div>

关键样式代码：

background: radial-gradient(circle at left,transparent 10px,  red 0) left,radial-gradient(circle at right,transparent 10px, red 0) right;
background-repeat: no-repeat;
background-size: 50% 100%;