Html 曲线形状的Div边框

我试图在凸面形状中实现div边界，悬停时它应该是正常的正方形。我已经在底部添加了相同的内容，我想在顶部添加我以前尝试使用的内容，但无法达到效果。有人能帮我吗？下面是我迄今为止所做的代码。 任何帮助都将不胜感激

*{
框大小：边框框；
}
.服务{
位置：相对位置；
宽度：500px；
高度：420px；
利润率：100像素；
背景色：#中交；
过渡：所有0.2秒缓解；
动画：下压0.4s缓；
}
.服务：在{
}
.serv_部分{
最高：83%；
位置：相对位置；
溢出：隐藏；
填充：50px0；
}
.serv_内{
位置：相对位置；
背景：#fff；
高度：25px；
}
.serv_-inner:之后{
盒影：0.80px#fff；
边界半径：100%；
位置：绝对位置；
高度：150像素；
内容：''；
右图：-20%；
左-20%；
顶部：-150px；
过渡：所有0.4缓进缓出；
}
.services:hover.serv_inner:after{
顶部：-120px；
}
.serv_内部：在{
/*盒影：0.80px#fff；
边界半径：100%；
位置：绝对位置；
高度：150像素；
内容：''；
右图：-20%；
左-20%；
顶部：130像素；
过渡：所有0.4缓进缓出*/
}
span.image\u标题{
位置：绝对位置；
颜色：红色；
填充：10px 20px；
字体大小：30px；
z指数：10；
动画持续时间：2.5s；
动画填充模式：两者都有；
}
span.image\u标题p{
字体大小：32px；
字号：900；
字体系列：“舞蹈脚本”，草书；
颜色：卡德蓝；
}

---

您可以使用before和after元素制作曲线，悬停时将psuedo元素隐藏在元素后面，并按如下方式删除曲线：

.services{
位置：相对位置；
宽度：100px；
高度：60px；
利润率：100像素；
背景色：#中交；
z指数：0；
}
.服务：悬停：之前{
顶部：0px；
边界半径：0；
}
。服务：悬停：之后{
底部：0px；
边界半径：0；
}
.服务：之前，.服务：之后{
内容：''；
位置：绝对位置；
宽度：100%；
高度：40px；
背景色：#中交；
边界半径：50%；
z指数：-1；
过渡：全部。4s；
}
.服务：在{
顶部：-20px；
}
.服务：之后{
底部：-20px；
}

---

如果我理解正确，您可以通过简单地为边界半径的水平和垂直尺寸使用不同的值来实现这一点（更多信息见：

div{
背景：灰色；
高度：100px；
宽度：200px；
过渡：边界半径。15秒放松；
}
/*默认状态下的边界半径*/
div{
边框：4倍纯黑；
边界半径：50%/20px；
}
div:悬停{
边界半径：0；
}

---

这里我想在图像上添加之前和之后时使用图像。我不明白你说的是什么@Husnayou只需在div中添加一个图像，然后在图像上查看它的外观。这里我想添加像橡皮筋一样的弹性，可以在边框上添加果冻效果吗？边框半径属性也可以设置动画。但是对于边界的效果可能会很棘手，或者你会在洞div上使用这种效果吗？这也适用于边界半径。谢谢，实际上我正在使用css尝试这种效果。