왜 상자 크기 : 패딩 상자가 Mac에서 다르게 보입니까? <a href="https://i.stack.imgur.com/8SLeB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8SLeB.png" alt="enter image description here"></a></p> <p>그러나 Mac에서 크롬에</p> <p>는, 버튼 다음과 같습니다 :</p> <p>

Question

#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에서 크롬에

는 버튼 내가 예상대로 표시

왜 그렇습니까? 테두리 이미지를 단색으로 유지할 수있는 CSS가 있습니까?

Answer 1

border-image을 구현하는 대신 border-radius의 둥근 버튼을 만드는 것이 좋습니다. 아래의 인라인 예제를 참조하십시오.

왜 당신의 모습이 옳지 않은지에 대한 기술적 인 설명에 대해 더 자세히 살펴보고 싶다면 테두리 이미지를 만들기위한 모범 사례를 조사하는 것이 좋습니다. Mac에 망막 디스플레이가 있고 이미지의 크기가 잘못 조정되었을 수 있습니다.

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>

: border-radius를 사용