我正在使用 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>uj5u.com熱心網友回復：
我會使用背景和更少的代碼以不同的方式做整個事情：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/426742.html