여러 선형 그라디언트가 위쪽 방향으로 남음

테두리 나 상자 그림자와 같은 방법으로 그라디언트가 적용된 사각형 요소를 만들어야합니다. 요소를 기울이거나 회전 할 때 테두리에 약간의 선이 나타나기 때문입니다.여러 선형 그라디언트가 위쪽 방향으로 남음

지금까지 내가 얻을 수있는 (또는 내가 방법을 모른다)

내가이 함께 시도했지만 작동하지 않는 다른 방향으로 여러 그라디언트를 사용하지만, 그것이 불가능처럼 보이는 ()의 공급 업체 접두사 :

background: 
    linear-gradient(top, white 0%, white 5%, red 5%, red 95%,white 95%, white 100%), 
    linear-gradient(left,white 0%, white 5%, red 5%, red 95%,white 95%, white 100%) 
    ;

이 달성하고자하는 것을 보여주기 위해 codepen을 만든 여전히 상자 그림자 같은 문제)

와 (경계를 사용할 수없는 이유도 함께 시도 an : after와 그것이 작동하지만, 나는 접근이 필요하다. 의사 요소 뒤에.

감사합니다.

출처

2013-08-23 rafakol

합니다. ': after'와 같은 두 번째 elment를 사용해야합니다 – M1K1O

동일한 코드를 사용해 보았지만 1 차 그라디언트에 대해'red' 대신'transparent'를 사용 했습니까? –

감사합니다 @IlyaStreltsyn, 이제는 : after를 사용하지 않고 첫 번째 그라디언트의 투명도와 두 번째 그라데이션의 투명도를 설정합니다. 이제 나는 논리를 이해하고 올바르게 보인다. – rafakol

Ilya Streltsyn 덕분에 문제가 해결되었습니다.

그래디언트를 사용할 때 코드 순서가 중요합니다. 그래서 기본적으로 작동합니다

background: 
    -webkit-linear-gradient(top,white 0%, white 5%, transparent 5%, transparent 95%,white 95%, white 100%), 
    -webkit-linear-gradient(left,white 0%, white 5%, red 5%, red 95%,white 95%, white 100%);

}

Codepen here 이것은 하나 개의 요소 (지금까지) 수행 할 수 없습니다

출처

2013-08-23 16:18:28 rafakol

가운데 색상을 투명으로 설정 한 : after 요소를 사용해보세요.

출처

2013-08-23 11:28:12 Guy

나는 그것을 시도하고 그것을 왼쪽으로 추가 작동합니다 : -1px 및 너비 + = 2px하지만 난 여전히 그것을하지 않고 싶습니다 : 가능하다면 후. – rafakol

여러 선형 그라디언트가 위쪽 방향으로 남음

답변

관련 문제