Html 边界脊和凹槽样式之间的差异

我想知道边框样式之间的差异-脊线和凹槽。当我使用它们时，我无法发现两者之间的区别。我无法上传图像，因为我还没有达到10级，以使其更清晰。代码如下：

border-style: groove ridge dashed groove;

这里有一些

据此：

groove：显示导致雕刻效果的边框它与山脊相反。

---

它的边界阴影位置：

div{
填充：10px；
利润率：10px；
浮动：左；
背景色：白色；
}
.包裹{
背景色：#ffdddd；
}
#山脊{
边框宽度：5px；
边缘样式：脊；
右边距：1px；
}
#沟槽{
边框宽度：5px；
边框样式：凹槽；
左边距：1px；
}

脊
沟槽

Groove是一种3D效果，给人的印象是边框被刻在画布上。 “脊”是一种3D效果，与“凹槽”效果相反，因为边界似乎从画布上突出

此链接为您提供了一个清晰的概念：

---

在以下内容中，差异的定义有些模糊：

凹槽
边界看起来像是刻在画布上的

山脊
与“groove”相反的是：边框看起来好像是从画布中出来的

这允许各种解释和实现，而视觉效果往往不是那么清晰。当边界相对较宽时，它往往更清晰。通常浏览器使用两种不同的颜色来创建印象，即声明的边框颜色和较浅的颜色。这意味着当光线从左上角方向照射时，对应于凹槽或脊状边界的概念。例如：

span{边框：纯红10px}
.groove{边框样式：groove}
.ridge{边框样式：ridge}
沟槽
屋脊

请参见