美文网首页
css3 border-radius参数详解 斜杠/前后8个参数

css3 border-radius参数详解 斜杠/前后8个参数

作者: 三人行慕课 | 来源:发表于2019-05-28 23:23 被阅读0次

    原文链接:https://www.3mooc.com/front/articleinfo/231

    很多资料查询border-radius属性的时候,看到描述都是比较模糊不清的,包括w3school等网站有些让初学者一头雾水。尤其是八个参数根本不知道斜杠前和斜杠后的两组,真是让人一脸茫然。

    其实通过一张示意图来理解的话就很容易了,那么我先来画一张示意图。

    我们可以理解成是在角的位置放了一个圆形,而我们设置的参数就是圆形的半径,/前和/后分别是水品半径和垂直半径(横向的半径和纵向的半径)。

    设置参数的顺序分别是左上、右上、右下、左下,在这里简称为1、2、3、4

    我们设置这样的参数 50px 50px 50px 50px/25px 25px 25px 25px;(相当于50px/25px)

    也就是1 2 3 4的水平半径都是50像素,垂直半径都是25像素,就会得到这样的图形:

    我们来分析一下就是

    这样看起来就显而易见,横向半径是50px,纵向半径是25px。

    相关文章

      网友评论

          本文标题:css3 border-radius参数详解 斜杠/前后8个参数

          本文链接:https://www.haomeiwen.com/subject/kbdstctx.html