#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上,按钮看起来像我预期的那样:
但是在Mac上的Chrome上,按钮看起来像这样:
为什么是这样?我可以改变CSS中的任何东西,以保持边框图像稳固吗?
我强烈建议用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>