html - 边框脊线和凹槽样式之间的区别

Question

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

border-style: groove ridge dashed groove;

Answer 1

它的边框阴影位置:

Ridge: from top left
Groove: from bottom right

div {
  padding: 10px;
  margin: 10px;
  float: left;
  background-color: white;
}
.wrap {
  background-color: #ffdddd;
}
#ridge {
  border-width: 5px;
  border-style: ridge;
  margin-right: 1px;
}
#groove {
  border-width: 5px;
  border-style: groove;
  margin-left: 1px;
}

<div class="wrap">
  <div id="ridge">ridge</div>
  <div id="groove">groove</div>
</div>