本文介绍如何使用CSS背景图像属性实现一个圆形区域中30%的红色填充效果。通过组合两个线性渐变背景，可以精确地展示出360度圆的30%，即108度角被红色填充，其余部分保持透明。
使用不透明度.它是介于0(=透明)和1(=不透明)之间的值,因此30％为0.3.
.circle
{
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid;
background-color: #ff0000;
opacity: 0.3;
}
30
编辑根据你的评论,你想要360度的圆的30％,所以360 x 30％= 108.为此,使用背景图像：
>绘制垂直红色线性渐变,意味着-90度.这将用红色填充圆圈的一半.
>绘制白度线性梯度,度数为-18(= 108-90).这将覆盖超过108(30％)的红色部分.
.circle
{
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid;
background-image:
linear-gradient(18deg, white 50%, transparent 50%),
linear-gradient(-90deg, red 50%, transparent 50%);
}
30
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
