background-clip : 이상한 행동

Question

최근에 css3 기능을 실험 해봤는데 이상한 행동을 발견했습니다. (나는 firefox-nightly 18.0a1 (2012-09-24) 및 크롬 버전 22.0.1229.91 베타를 사용합니다.

검정색 배경을 말하면서 원 상자를 만들고 싶었고, 그라데이션 테두리는 파란색에서 투명으로 말합니다. 그래서 두 개의 다른 배경을 사용하고 콘텐츠 상자에서 파란색 상자/투명 상자를 콘텐츠 상자 밖의 채우기 상자에 표시하려면 클립 상자 (검정색 상자) 하나를 클립 할 수있을 것이라고 생각했습니다.

background: -webkit-linear-gradient(0deg, black, black), -webkit-linear-gradient(-90deg, rgb(0, 102, 204), rgba(0, 102, 204, 0); 
background: -moz-linear-gradient(0deg, black, black), -moz-linear-gradient(-90deg, rgb(0, 102, 204), rgba(0, 102, 204, 0); 
background-clip: content-box, border-box; 

그것은 크롬에서 완벽하게 잘 작동하지만 파이어 폭스에서 다른 배경 클립하지 않는 대신, 오직 후자를 적용, 적용 할 것, 그래서 모두 배경 때문에, 하나를 같은 방법으로 cliped된다 파란색/투명 배경을 볼 수 없습니다.

그런 다음 테두리가 얇은 파란색 테두리로 둘러 싸서 외부 테두리를 넣기 시작했습니다. 그래서 추가 : 모든 때문에 국경 반경의 원 모양으로 잘린했지만, 내용이 사각형이되었다 :

border: 3px solid blue; 

크롬은 아주 이상한 방법으로 내 원을 표시. http://jsfiddle.net/wUtPX/

이 일부 알려진 버그가 :

나는 분명히 일을 만들 수있는 jsfiddle을했다? 버그 추적기에 신고해야합니까?

Answer 1

나는 MDN specs for background-size을 읽고 있습니다. 여기에 그들은 명시 적으로 그런 말 : 배경 이미지에 의해 정의 된 여러 배경에 대한

값이 쉼표

background-clip 사양에 분명 아니지만

로 구분하여 나열 될 수 있습니다. 어쩌면 다중 값을 지원하지 않을 수도 있습니다.

또한 W3C specs에는 "여러 배경 이미지 레이어 지정하기"방법의 배경 클립이 포함되어 있지 않습니다. 그래서 나는 을 여러 가지 소유권을 지원해서는 안되며 Chrome이 실제로하고있는 일은 실제로 "잘못"이라고 생각합니다.

당신은 아마 예를 들어, (여러 값을 지원) 배경 - 기원과 배경-크기의 해결 방법을 찾을 수 있습니다

:

background-origin: border-box, content-box; 
background-size: 100% 100%, 99% 99%;