边框样式岭不适用于chrome和safari浏览器

Question

border style ridge在Firefox浏览器中工作，但不能在chrome和safari中工作。我们可以解决这个问题。

Answer 1

<div class="module">
<div>
.module {
  width: 200px;
  height: 200px;
  background: #f06d06;
  position: relative;
  border: 5px solid blue;  
  margin: 20px;
}
.module:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: red;
  z-index: -1;
}

使用webkit .... 试试这个..

Answer 2

我似乎找不到确切的原因，但并不是因为ridge属性不起作用。似乎ridge属性用于确定除黑色之外的其他颜色的算法，实际上显示边界中的脊，导致颜色没有差异。

我认为Firefox实际上除了黑色之外还实施了不同的颜色，因为我的颜色比黑色更暗。

我使用深灰色作为测试，然后脊出现。

而不是黑色，我会使用稍微浅一点的色调来进行铬和野生动物园。

div {
border: 6px #151513 ridge;
}