Safari에서 CSS 테두리 이미지 그라데이션이 작동하지 않습니다.

Safari 10 및 CSS 테두리 이미지 그라데이션 문제가 발생했습니다. 다른 모든 브라우저와 Safari 9에서도 작동합니다. 온라인 시뮬레이터의 Safari 10에도 표시됩니다. Safari에서 CSS 테두리 이미지 그라데이션이 작동하지 않습니다.

나는 내가 정말 simplfied 그래서 그냥 내 CSS했다 가정하고 만든 (! 나는 그게 아니라 IE가 수정 10. 감사 IE 11 추측) : 아래의 이미지를 참조하십시오 깡깡이. https://jsfiddle.net/tgbuxkee/

아래에도 표시됩니다.

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 6px solid transparent; 
 
    -moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%); 
 
    -webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%); 
 
    border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%); 
 
    -webkit-border-image-slice: 2; 
 
    border-image-slice: 2; 
 
    
 
}

<div> 
 

 
</div>

사람이 이런 일이 될 수있는 이유는 어떤 생각을 가지고 있습니까? 사파리에 이미지 테두리가있는 bug이 있다는 것을 알고 있습니다.하지만 여기서는 그렇지 않습니다 (어쩌면 그렇습니다).

지도가 도움이됩니다.

감사합니다.

출처

2016-12-01 Kenton de Jong

나는 이것을 과거에 보았지만 100 % 확실하지는 않습니다. (아직 답변을 게시하지 않았습니다.) 'border : 6px solid transparent' 대신; 그냥'border-width : 6px; border-style : solid;'(no border-color')와 일하는 것이 었습니다. 이미지가 색상을 덮어 쓰므로 다른 브라우저에서도 작동합니다. – Harry

이전에이 문제가 발생하여 웹 어딘가에서 border-color: transparent 설정을 피하면 문제가 해결된다는 것을 기억하고있었습니다. 나는 그것에 대해 읽은 곳을 기억하지 못한다.

Mac의 Safari 10이 테두리 이미지 위에 투명 테두리 색상을 선호하므로 아무 것도 표시하지 않는 것 같습니다. border-width과 border-style 만 설정하면 문제를 해결할 수 있습니다. 이 솔루션은 지원되는 다른 브라우저에서도 작동합니다.

오페라 (41), 크롬 V56 (DEV), 사파리 (10) (맥) 사파리 5 (윈도우), 사파리 (아이폰 OS), IE11, 에지, 파이어 폭스 47.0.1에서 테스트

참고 : 당신은 '질문에 IE10을 인용했지만, 제가 알기로는 border-image doesn't work in it을 알고 있으므로 주어진 솔루션도 그렇지 않습니다.

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-width: 6px; 
 
    border-style: solid; 
 
    -moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%); 
 
    -webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%); 
 
    border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%); 
 
    -webkit-border-image-slice: 2; 
 
    border-image-slice: 2; 
 
}

<div> 
 

 
</div>

출처

2016-12-01 08:21:24 Harry

그게 해결책이야! 어떤 이상한 "특징". 고마워요! IE 10 편집을 주셔서 감사합니다. IE 11을 사용하고 있었다고 생각합니다. –

@KentondeJong을 환영합니다. 도와 줄 수있어서 기뻐 :) – Harry

다음은 유용한 추가 정보 일 수있다. 받아 들여진 대답은 Safari 11 (게시 시점)에서 여전히 유효하지만 기록을 위해 border-image : url, Safari (v11)은 투명화를 사용하는 속기 테두리를 허용합니다., 이 같은 -webkit- 공급 업체 접두사 마지막 나열 경우 : 그것은 마지막으로 공급 업체 접두사를 나열하는 비표준이기 때문에

div { 
    border:1px solid transparent; 
    border-image:url([some-border-image]) 1 0 1 repeat; 
    -webkit-border-image:url([some-border-image]) 1 0 1 repeat; 
}

, 나는 대부분의 웹 표준 친화적으로 허용 대답을 선호를 .

출처

2018-02-23 20:34:04 user16119

Safari에서 CSS 테두리 이미지 그라데이션이 작동하지 않습니다.

답변

관련 문제