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>

Answer 2

差异在CSS 2.1 specification：

中以某种模糊的术语定义

<强>槽
边框看起来好像刻在画布上。

<强>脊
'凹槽'的反面：边框看起来好像是从画布中出来的。

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

<style>
  span { border: solid red 10px }
  .groove { border-style: groove }
  .ridge { border-style: ridge }
</style>
<span class=groove>groove</span>
<span class=ridge>ridge</span>

Answer 3

以下是一些MDN docs on css border-style

根据这个：

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

Answer 4

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

此链接为您提供了清晰的想法：

http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style

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

4 个答案: