一个关于border radius值设置的问题记录

问题记录 今天本打算要完成一个类似于进度条的小组件, 原型是这样的(这里长200px, 高28px) 我一看, 很简单嘛, 抛开那个数字1样式不谈, 整体父级样式就是一个左边半圆形, 右边带有弧度的div啊。 这个用css的border-radius就可以搞定了啊。 左边是圆角, 圆角50px啊, 右边是小圆角, 以往的div都是8px弧度的。 根据border-radius中角的顺序(以顺时针的方向解析,上左,上右,下右,下左), 设置border-radius: 50px 8px 8px 50px;就好了啊。 满心欢喜写好样式, 打开浏览器。 傻了, 不对啊, 我原以为是这样的 实际上