1个有关border

日期:2021-02-28 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

难题纪录

今日本准备要进行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;

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

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