border-radius详解

dkp included in HTML与CSS

2021-07-07 271 words One minute

Contents

前言

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

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

border-radius详解

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

一个值
```
border-radius: 10px;
```
四个值
```
border-radius: 10px 10px 10px 10px;
```

八个值，如下才是border-radius的完整形式

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

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

所以，红包弹框代码如下

<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>