时间戳

首页 > 解决方案 > 用css计算小宽度的边框半径

javascript - 用css计算小宽度的边框半径

问题描述

我想为进度创建一个滑块

如果说它是 1%，我如何计算边界半径的正确 px/%？

当它很大时，它看起来不错

<div style="background: grey; height: 25px; border-radius: 12.5px; width: 100%">
  <div style="background: green; height: 25px; border-radius: 12.5px; width: 15%" />
</div>

当它像 1% 一样小时，它看起来像这样

<div style="background: grey; height: 25px; border-radius: 12.5px; width: 100%">
  <div style="background: green; height: 25px; border-radius: 12.5px; width: 1%" />
</div>

标签： javascripthtmlcss

解决方案

尝试添加：

overflow: hidden;

为您的绿色填料。它将隐藏在容器内。你试图做的事情几乎是不可能的。您能想象在 中的元素上添加aborder-radius吗？< 2pxwidth

<div style="background: grey; 
            height: 25px; 
            border-radius: 12.5px; 
            width: 100%; 
            overflow: hidden;">
  <div style="background: green; 
              height: 25px; 
              border-radius: 12.5px; 
              width: 1%" />
</div>

推荐阅读