开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

前言

近期看到一个css实现水滴效果视频，本着知其然知其所以然的心理对其研究了一番，整理了一下保姆级的border-radius教学分享给大家

了解作用

如果工作碰到有不配合的ui不愿意给你特效的gif图怎么办，咱们要学会自给自足，比如咱们门户网站需要一个水滴效果来展现，但是ui就是不给你图，要你自己写，这看完这篇你不就学会了吗

boder-radius

border-radius：设置元素的圆角属性，可以设置百分比也可以设置像素单位

一个参数

设置一个参数的时候代表四个角的圆角属性

// html
<div class="box"></div>

// css
.box{
  width: 300px;
  height: 300px;
  border: 2px solid aqua;
  border-radius: 50px;
}

两个参数

设置两个参数的时候，第一个参数代表：左上、右下 ，第二个参数代表：右上、左下

// html
<div class="box"></div>

// css
.box{
  width: 300px;
  height: 300px;
  border: 2px solid aqua;
  border-radius: 50px 100px;
}

三个参数

设置三个参数的时候，第一个参数代表：左上 ，第二个参数代表：右上、左下，第三个代表：右下

// html
<div class="box"></div>

// css
.box{
  width: 300px;
  height: 300px;
  border: 2px solid aqua;
  border-radius: 50px 100px 20px;
}

四个参数

设置四个参数的时候，第一个参数代表：左上 ，第二个参数代表：右上，第三个代表：右下，第四个参数代表左下

// html
<div class="box"></div>

// css
.box{
  width: 300px;
  height: 300px;
  border: 2px solid aqua;
  border-radius: 20px 60px 100px 200px;
}

其它写法

除了上面的固定的写法还有一种比较少见的写法那就是中间用斜杠 / 分割开来，这种写法可以控制固定边的圆角, 斜杠左右都可以写四个参数

左侧四个参数

左侧四个参数分别代表上下两条边左右的上部分，下部分圆角

// html
<div class="box"></div>

// css
.box{
  width: 300px;
  height: 300px;
  border: 2px solid aqua;
  border-radius: 20px 40px 60px 80px / 10px;
}

右侧四个参数

// html
<div class="box"></div>

// css
.box{
  width: 300px;
  height: 300px;
  border: 2px solid aqua;
  border-radius: 20px / 40px 60px 80px 100px;
}

到这里如果还有人不懂，那我只能放出究极大招了

同样都是支持一，二，三，四，四个参数写法，这里就不赘述了，大家自行去实践

绘制水滴

准备我们需要的盒子

<div id="water"></div>

需要的样式 (注释有解释作用),给大家推荐一个绘制水滴形状的网站在这里直接cv就行了,另外box-shadow要是还有不太了解的可以查阅一下文档看看,这里就不做讲解了

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  background-color: #c0d12b;
  /* 上面代码让盒子居中显示 */
}
#water{
  width: 300px;
  margin-top: 200px;
  height: 300px;
  /* 设置出盒子水滴形状 */
  border-radius: 42% 58% 77% 23% / 40% 31% 69% 60% ;
  /* 绘制出水滴阴影效果 */
  box-shadow: inset 10px 20px 30px rgba(0,0,0,0.5),
  10px 10px 20px rgba(0,0,0,0.3),
  15px 20px 30px rgba(0,0,0,0.05),
  inset -10px -10px 15px rgba(255,255,255,0.8);
}

水滴高光

给水滴加上高光效果,显示更逼真,这里我们利用伪元素就可以了

#water::after{
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  top: 240px;
  left: 48%;
  background-color: rgba(255,255,255,0.8);
  border-radius: 51% 49% 35% 65% / 40% 54% 46% 60% ;
  animation: move 5s linear infinite alternate;
}
#water::before{
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 265px;
  left: 47%;
  background-color: rgba(255,255,255,0.8);
  border-radius:51% 49% 35% 65% / 59% 54% 46% 41% ;
}

水滴动画

最后加上水滴的动画

#water{
  width: 300px;
  margin-top: 200px;
  /*  */
  height: 300px;
  /* border: 1px solid #000; */
  border-radius: 42% 58% 77% 23% / 40% 31% 69% 60% ;
  box-shadow: inset 10px 20px 30px rgba(0,0,0,0.5),
  10px 10px 20px rgba(0,0,0,0.3),
  15px 20px 30px rgba(0,0,0,0.05),
  inset -10px -10px 15px rgba(255,255,255,0.8);
  animation: move 4s linear infinite alternate;
}
@keyframes move{
  25%{
    border-radius: 32% 68% 34% 66% / 44% 18% 82% 56%   ;
  }
  50%{
border-radius:38% 62% 21% 79% / 56% 59% 41% 44%   ;
  }
  100%{
    border-radius: 42% 58% 66% 34% / 38% 82% 18% 62%   ;
  }
} 

完整代码

全部代码在码上掘金 码上掘金

结尾

到这里要是还有没有学会border-radius的,麻烦你私信找我,我手摸手教你,我就不信这还有不会的🧐