为什么box-sizing:padding-box在mac上看起来不同?

问题描述 投票:1回答:1

#map-search-button {
    display: inline;
    float: right;
    border-style: solid;
    border-image: url(https://i.imgur.com/r35pKjB.png) 8 8 8 8;
    border-width: 5px 5px 5px 5px;
    height: 50px;
    width: 125px;
    background-color: #00ACC8;
    background-clip: padding-box !important;
    font-size: 1.5em;
    text-align: center;
    line-height: 40px;
    color: white;
}
<div id="map-search-button">Find us!</div>

在Windows上的Chrome上,按钮看起来像我预期的那样:

enter image description here

但是在Mac上的Chrome上,按钮看起来像这样:

enter image description here

为什么是这样?我可以改变CSS中的任何东西,以保持边框图像稳固吗?

html css macos
1个回答
2
投票

我强烈建议用border-radius创建一个圆形按钮,而不是试图实现border-image。请参阅下面的内联示例。

至于为何你看起来不正确的技术解释,如果你想进一步追求这条路线,你可能想要研究制作边界图像的最佳实践。您的Mac可能有Retina显示屏,并且不正确地缩放图像。

使用border-radius

body {
  font-family: impact, sans-serif;
  letter-spacing: .02em;
}

#map-search-button {
  width: 125px;
  height: 50px;
  line-height: 50px;
  background-color: #00ACC8;
  border: 5px solid #00ACC8;
  border-radius: 8px;
  font-size: 1.5em;
  text-align: center;
  color: white;
}
<div id="map-search-button">FIND US!</div>
© www.soinside.com 2019 - 2024. All rights reserved.