Contents

border-radius详解

Contents

前言

在开发过程中有遇到一个需求,就是开发一个红包袋的弹框。大概长这样的:

/images/image-20210628103147257.png

当时做的时候是用了一个圆和矩形去切的。或者有的人可能会用背景图做。其实这个只需要使用border-radius属性就可以解决了。

border-radius详解

border-radius属性是有8个值的,大多情况下我们使用的是简写的形式。如,我们给div的四个角设置10px的圆角。

  1. 一个值

    border-radius: 10px;
    
  2. 四个值

    border-radius: 10px 10px 10px 10px;
    
  3. 八个值,如下才是border-radius的完整形式

    border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
    

具体这八个值分别控制什么,如下图所示

/images/image-20210628112041458.png

所以,红包弹框代码如下

<body>
    <div style="width:  100px;height: 200px;background: #EE664F;border-radius: 20px;margin: auto;border-radius: 50% 50% 10px 10px/ 15% 15% 10px 10px;"></div>
</body>