问题记录今天打算完成一个类似进度条的小组件。原型是这样的（这里长200px，高28px）。我看到它很简单。throw不管第一个样式，整体父样式左边是一个半圆，右边是一个带弧度的div。这可以通过css的border-radius来完成。左边是圆角，圆角是50px，右边是小圆角。前面的div都是8px弧度。根据border-radius中角的顺序（顺时针方向分析，左上、右上、右下、左下），设置border-radius:50px8px8px50px；欣喜若狂写好样式后，打开浏览器。笨蛋，不对，我还以为是这样呢。事实上，它在浏览器中是错误的。右侧的角度已设置。为什么它看起来像没有设置？我把8改成10px试了一下跟没设置差不多8px应该有清晰的弧度。让我们将它设置为8px。没错，这就是8px应该有的弧度。为什么左边改成50px了？跟50px有关系吗？带着疑惑，我百度了一下。百度了一下，其实border-radius(w3c)的完整写法是 border-radius:1-4length|%/1-4length|%;通常我们写border-radius:50px，其实完整的写法应该是：border-radius:50px50px50px50px/50px50px50px50px;“/”前的四个数字表示圆角的水平半径，最后四个数值表示圆角的垂直半径。每个顺序相互对应（水平半径：左上，右上，右下，左下）/（垂直半径：左上，右上，右下，左下），什么是水平半径和垂直半径？根据水平半径与垂直半径的比值，可以调整转角的弧度。如果两个半径相同，则为圆角。这也是为什么我一般把边角设置成圆角的原因，因为我没有写完整。比如border-radius:10px20px30px40px/40px30px20px10px就是这样。让我们回顾一下我们之前的问题，我们忽略了它们。高度为28px。这样我们想把右边设置成一个半圆，只要水平和垂直半径都是14px不就可以了吗？边框半径：14px8px8px14px/14px8px8px14px；对不对？之前右边设置的8px圆角好像没有效果。和50px相比，可能是按比例压缩了，因为左边已经是28px高了，再往里面插入一个50px的半径。我计算(14*8/50=2.24)，相当于设置border-radius:14px2.24px2.24px14px/14px2.24px2.24px14px;以后写样式要小心，小问题不小。
