아래쪽 그라데이션 테두리

Question

CSS Tricks에 따르면 다음 CSS 구문은 왼쪽 테두리 그라디언트가됩니다.

.left-to-right { 
border-width:3px 0 3px 3px; 
-webkit-border-image: 
    -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; 
-webkit-border-image: 
    -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; 
-o-border-image: 
     -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; 
-moz-border-image: 
     -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; 
} 

요소의 아래쪽에 테두리 그라디언트를 가져 오려고합니다.

나는이

border-width:0 0 3px 0; 

이

border-width:0 3px 3px 3px; 

이

border-width:3px 0 3px 3px; 

를 변경 시도하고 누군가가 아래쪽 테두리가 작동하는 것을 점점 나를 도울 수있다, 작동하지 않습니다 ?

이렇게하려면 WebKit 브라우저가 필요할 수 있습니다.

다음은 함께 작동하는 피들입니다. http://jsfiddle.net/HsTcf/

감사합니다.

Answer 1

border-width: 0 0 3px 0; 

이 맞습니다.

그러나 다음이 이루어질 필요가 변경됨

... -gradient(right, ... 

필요

는 100% 1;에

... -gradient(top, ... 

및 1 100%;로 변경한다.

데모 : 여기 jsfiddle.net/HsTcf/3

Answer 2

는 바닥 국경 작동하는 또 다른 방법입니다. 이것은 사이트 예제의 완전한 클래스 선언입니다.

#header_bg { 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 121px; 
 
    top: 0px; 
 
    background-color: #fff; 
 
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important; 
 
    z-index: 10; 
 
}

<div id="header_bg"></div>

난 당신이 고정 된 헤더를 만들려고 위의 가정입니다

. 물론 가장 중요한 부분은 box-shadow 속성입니다. 이것은 대부분의 최신 브라우저에서도 잘 작동합니다.