Html 边框样式脊在chrome和safari浏览器中不起作用

border style ridge在Firefox浏览器中可用，但在chrome和safari中不可用。如何解决此问题。

<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;
}

.模块{
宽度：200px；
高度：200px；
背景#f06d06；
位置：相对位置；
边框：5px纯蓝色；
利润率：20px；
}
.模块：之后{
内容：''；
位置：绝对位置；
顶部：-15px；
左：-15px；
右图：-15px；
底部：-15px；
背景：红色；
z指数：-1；
}

与webkit一起使用。。。。

---

试试这个..

我似乎找不到确切的原因，但这不是因为您的

ridge

属性不起作用。

ridge

属性用于确定除黑色之外的其他颜色，以实际显示边框中的脊线的算法似乎导致颜色没有差异

我想说，Firefox实际上是在强制使用除黑色以外的另一种颜色，因为我的颜色比黑色深

我用深灰色作为测试，然后山脊出现了

对于chrome和safari，我会使用稍微浅一点的色调，而不是黑色。

div {
border: 6px #151513 ridge;
}

---

发布您尝试使用的CSS。同时提及浏览器版本。对我来说，它在Chrome和Firefox上都很好用。你可以参考这个页面：看这个回答：6px黑脊；5.1.7 safari浏览器