Firefox 框阴影插图无法正常工作答案

【问题标题】：Firefox box shadow inset not working properlyFirefox 框阴影插图无法正常工作
【发布时间】：2022-02-13 03:47:36
【问题描述】：

我正在使用 box-shadow 在左右两侧创建内部“边框”。它在 Chrome 或 Edge 中运行良好，但在 Firefox 中它也会创建“底部边框”。我尝试使用 -moz- 和 -webkit- 作为前缀，但没有成功。

我不知道如何在 chrome 中模拟它，所以请在 Firefox 中运行代码，看看我在说什么。

此外，在浏览器中放大或缩小时有时会出现故障（但在 Firefox 中放大或缩小并不能解决此问题）

div{
      width: 150px;
    height: 200px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #001f49;
    display: grid;
    grid-template-rows: 77% 23%;
    align-items: center
}
h1{
  color: white;
    text-align: center;
    text-transform: uppercase;
    font-size:18px;
}
span{
      background: white;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49, inset 0 -1px 0 0 #001f49;
    -moz-box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49, inset 0 -1px 0 0 #001f49;
    -webkit-box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49, inset 0 -1px 0 0 #001f49;
}
span::before{
  background: inherit;
    top: -22px;
    content: '';
    display: block;
    height: 22px;
    left: 0;
    position: absolute;
    right: 0;
    transform: skewY(352deg);
    transform-origin: 100%;
    box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49;
    -moz-box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49;
    -webkit-box-shadow: inset -1px 0px 0 0 #001f49, inset 1px 0 0 0 #001f49;
}
a{
  color: #ed174a;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
}

<div>
<h1>
Change
</h1>
<span><a href="#">Pricelist</a></span>
</div>

【问题讨论】：

标签： html css firefox pseudo-element

【解决方案1】：

我会使用背景和更少的代码来做不同的事情：

div {
  width: 150px;
  height: 200px;
  margin: 0 auto;
  border:1px solid #001f49;
  background: linear-gradient(-13deg,#0000 33%,#001f49 34%);
  display: grid;
  grid-template-rows: 77% 1fr;
  align-items: center;
  text-align: center;
}

h1 {
  color: white;
  text-transform: uppercase;
  font-size: 18px;
}

a {
  color: #ed174a;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
}

<div>
  <h1>
    Change
  </h1>
  <span><a href="#">Pricelist</a></span>
</div>

【讨论】：

太棒了，谢谢，没想到这个。