Css 圆形按钮上带有方框阴影的线性渐变

我正在尝试创建一个类似于这些的按钮

并且希望只用css就可以做到这一点

我创建了一个快速的jsfiddle页面（但是我还没能让它工作，尽管我确实看到了round元素在没有jsfiddle的情况下使用了相同的代码）

在我花太多时间做这件事之前，我想确保可以在径向渐变上创建线性渐变。我尝试使用背景图像：线性渐变，但这只适用于div，而不适用于边框

---

你觉得怎么样？可能吗？还是我应该只使用图像

你的JSFIDLE有几个错误（你写的是webit而不是webkit，你使用的是没有单位的数字，如4和7），检查一下，你似乎离你想要的按钮上的效果不远了。

谢谢你帮我整理这些东西。我知道我离这里不远，但我只得到了径向渐变，这不会产生与径向上的线性渐变相同的效果。