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

Question

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

border-style: groove ridge dashed groove;

Answer 1

这是边框阴影位置：

脊：从左上角
凹槽：从右下角

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>