我有以下CSS: -
a.btn.white-grad {
background: $lgrey;
color: #313149 !important;
border: 1px solid #000;
border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
border-image-slice: 20;
float: left;
@include font-size(26);
margin: 75px 0;
}
添加border-radius:5px似乎没有做任何事情,我认为这是因为我正在使用边框渐变,有没有办法让我达到所需的5px边框半径？
我已经尝试过这段代码，但面临大小问题。在更改圆形边框的大小时遇到问题，所以请帮助我解决这个问题。在代码片段上运行代码，将知道我遇到了什么问题，它应该看起来像图像中的我给了。这是在html中使用css的代码。如何自定义图形。通过在 html 中使用 css 来使图表部分的特定大小发生变化，但无法自定义图表。如何自定义它。可以在css中自定义吗？
body{
background: darkturquoise;
}
.circle-sector {
overflow: hidden;
width: 150px;
height: 75px;
transform-origin: 50% 100%;
position: absolute;
}
.circle {
margin-top:18px;
margin-left:5px;
width: 90px;
height: 60px;
border-radius: 60px 60px 0 0;
background: #00aaad ;
transform-origin: 50% 100%;
transform: rotate(90deg);
}
.center {
width: 80px;
height: 80px;
margin-left: 10px;
background: darkturquoise;
border-radius: 50%;
margin-top: 60px;
transform: rotate(0deg);
position: absolute;
}
.another-circle {
width: 100px;
margin-left: 0px;
height: 50px;
margin-top: 0px;
border-radius: 50px 50px 0 0;
background: …我正在尝试使用 css 和 html 创建饼图。我只会显示一些静态数字，因此我试图保持它相对简单并且不使用任何动画。
我目前在如何创建我想要的外观方面遇到了障碍。下面的代码片段完全按照我的conic-gradient意愿工作，这个问题是firefox 和 Internet Explorer 不支持的，这将是这个项目的一个问题。
.progress-circle {
--d: 50px;
--color: #002F65;
--progress: 40;
border-radius: var(--d);
height: var(--d);
width: var(--d);
background: conic-gradient( var(--color) calc(calc(var(--progress) / 100) * 360deg), transparent calc(calc(var(--progress) / 100) * 360deg));
}<div class="progress-circle"></div>我一直在寻找类似于上面的示例的替代方案，这使我看到了这篇文章：用 css 设计简单的饼图
我的问题是计算饼图百分比增长的方法似乎与我想要完成的不兼容。因为它是由transform: rotate(.1turn);
我的主要问题是否可以conic-gradient与其他浏览器兼容？如果不是，那么使用 css 制作饼图以与第一个示例非常相似的最佳方法是什么？
对于上下文，我将从数组中传递数据以确定饼图的百分比。
.pie {
width: 100px; height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image:
linear-gradient(to right, transparent 50%, #655 0);
}
.pie::before {
content: "";
display: block; …我尝试实施几个指南来创建一个按百分比填充的圆圈，但我似乎无法让它工作（没有动画，只有静态 CSS 圆圈）。
圆形边框当前遵循background-image: linear-gradient我第一次设置为 a(90+(360*0.percent))deg和第二个设置为90deg. 它在前 50% 上运行良好，但除此之外它不会相应地填充。
.circle {
position: relative;
top: 5px;
left: 5px;
text-align: center;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #ffffff;
}
.circle-border {
position: relative;
text-align: center;
width: 110px;
height: 110px;
margin-left: 30%;
border-radius: 100%;
background-color: #E53B3B;
background-image: linear-gradient(162deg, transparent 50%, #f0f0f0 50%), linear-gradient(90deg, #f0f0f0 50%, transparent 50%);
}<div class="circle-border">
<div class="circle">
</div>
</div>linear-gradient当我希望圆圈填充超过 50% 时，应该更改哪些值？