1个有关border

难题纪录

今日本准备要进行1个相近于进度条的小组件， 原形是这样的(这里长200px, 高28px)

我1看， 很简易嘛， 抛开那个数据1款式不谈， 总体父级款式便是1个左侧半圆形， 右侧带有弧度的div啊。
这个用css的border-radius便可以搞定了啊。 左侧是圆角， 圆角50px啊， 右侧是小圆角， 过去的div全是8px弧度的。 依据border-radius中角的次序(以顺时针的方位分析，上左，上右，下右，下左)， 设定border-radius: 50px 8px 8px 50px;就行了啊。 满心开心写好款式， 开启访问器。

傻了， 不对啊， 我原认为是这样的

具体上， 访问器中是这样的

不对了啊， 右侧的角度设定了啊， 如何看起来跟没设定1样呢， 我把8改为了10px在试了下， 還是类似跟没设定1样的。

8px按理说应当有显著的弧度了啊， 全设定成8px看看呢

对啊， 这是8px应当有的弧度， 为何改为左侧写成50px就变样了呢， 难道说跟50px相关？带着疑惑， 我看了看百度搜索。

百度搜索说， 实际上border-radius的详细写法（w3c）是　

border-radius: 1⑷ length|% / 1⑷ length|%;

平常大家写的border-radius : 50px，实际上详细的写法应当是：

border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;

“/”前的4个标值表明圆角的水平半径，后边4个值表明圆角的竖直半径

每一个次序11对应 (水平半径：左上 右上 右下 左下)/(竖直半径：左上 右上 右下 左下)，

甚么是水平半径和竖直半径呢？

依据水平半径跟竖直半径的比值， 能够调剂角的弧度， 二者半径同样， 便是个圆角。 这便是问甚么我平常设定的角全是圆角的缘故， 由于我沒有写详细过

比如 border-radius:10px 20px 30px 40px/40px 30px 20px 10px

便是这样的模样

再往返头看大家以前的难题

大家忽视了高宽比28px了啊. 这样算来， 大家要设定右侧是个半圆形， 要是水平跟竖直半径全是14px不就行了吗

border-radius: 14px 8px 8px 14px / 14px 8px 8px 14px;

这样，父级款式不就对了吗。

以前右侧设定的8px圆角看起来沒有实际效果， 将会跟50px比起来， 被等占比缩小了吧， 由于左侧原本就高28px， 塞了个半径50px进去， 我算算（14 * 8 / 50 = 2.24）, 就等于设定变成

border-radius: 14px 2.24px 2.24px 14px / 14px 2.24px 2.24px 14px;

之后写款式要小心了啊， 小难题也不小啊。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。