Html CSS按钮边框圆形内联形状

我正在尝试创建一个按钮，如下所示

到目前为止，我添加了这个样式，但它不等于图像中的按钮，我无法使长方体阴影在div中变圆。我不确定长方体阴影是否是正确的方法

#自定义按钮{
背景：红色；
边界半径：25；
边界：0；
身高：48；
填充：0 30px；
盒影：0 3px 0px 3px rgba（27、215、203）；
}

---

自定义按钮

我想这很接近您想要的。不过，我不得不在按钮内部添加一个额外的跨距来获取所有元素。您需要调整一些值以使其更符合您的喜好

按钮{
宽度：200px；
高度：60px；
边界半径：60px；
边界：无；
位置：相对位置；
}
按钮：之后{
内容：''；
位置：绝对位置；
排名：0；
左：-4px；
宽度：计算（100%-8px）；
身高：50%；
边框：8px实心红色；
边界底部：0；
边界半径：35px 35px 0；
}
按钮范围：之前，按钮范围：之后{
内容：''；
位置：绝对位置；
宽度：8px；
高度：8px；
边界半径：100%；
背景：红色；
顶部：计算（50%+4倍）；
z指数：1；
}
按钮跨度：之后{
左：-4px；
}
按钮跨度：之前{
右：-4px；
}

测试

你的

边界半径

和

高度

都需要一个单位，比如

px

。这看起来很好，我要试试看，这是否有响应性？你需要拿出设定的宽度，并使用最小宽度和填充的组合，根据里面的文本使它看起来正确。你只需要搞乱这些值，直到它看起来像你要找的。谢谢：）。你是怎么这么快想出这个解决方案的，你已经做过类似的事情了吗？我需要改进我的css，我想：起初我很想说这是不可能的。但是在做了几年前端开发人员之后，我学会了一些技巧，所以我很快就想出了一些东西。只是需要时间和练习。我需要如何改变它，使边界位于底部？