在css中，如何创建凸起的正方形

是否可以在纯css中实现这一点，而不需要在页面中使用嵌入式SVG

Obvs

border radius:10px

不能完全切割它

希望这有助于：

.square{
高度：80px；
宽度：80px；
背景：蓝色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：#fff；
边界半径：2em；
字号：2rem；
不透明度：0.5；
盒影：-1px 1px 1px#fff；
}

JS-Bin
8.

这是可能的，但是您必须使用svg而不是按钮标记

---

下面是一个快速示例，其中我们更改顶部和底部的

边界半径。我们可以使用另一个值作为一种奇怪的高度值，它将控制半径的高度


.box{
背景：#62f；
颜色：白色；
边界半径：50%/10px；
填充：30px；
宽度：1米；
高度：1米；
}
8
白色框阴影的原因是什么？这与示例的形状不同。在您的示例中，边是直的，它们的圆角半径应大于角。这与示例的形状不同。在您的示例中，边是直的，它们应该以比角更大的半径进行圆角。好的，我将尝试用更好的解决方案编辑我的示例。好了，@digout，我更新了示例！有点骇客，但它确实达到了预期的效果！相关：无论是谁结束了问题，您指定的相关问题都不符合我的要求。公认的答案解决了这个问题。公认的答案远远没有达到你向我们展示的目标。你可能需要更新你的问题。我的答案现在好一点了@TemaniAfif-我改变了一些值，现在很多了better@TemaniAfif描述其“远未达到”预期结果的程度。哦，你认为“不需要在页面中使用嵌入式SVG”是什么意思？你能分享更多细节吗？你需要figma