기존 CSS 그림자의 방향을 변경하십시오

Question

다음 CSS 그림자가 있습니다.

box-shadow:green 0 1px 3px;

이제 만 변경하고 싶다면 방향 그림자의 나는 시도했다 :

box-shadow:inherit 2px 0 inherit;

그러나 이것은 불행히도 작동하지 않습니다. 또한 다음과 같은 추가 속성이있는 것처럼 보이지 않습니다.

box-shadow-direction:2px 0;

또는

box-shadow-color:inherit;

---

색상이나 힘을 바꾸지 않고 방향을 어떻게 변경할 수 있습니까?

Answer 1

나는 같은 하위 부담이 없다는 것을 알고 있습니다 background-repeat, margin-left, border-bottom ~을 위한 box-shadow, text-shadow CSS3 속성. 자세한 내용은 다음을 참조하십시오. http://www.w3.org/tr/css3-background/#box-shadow .

'Box-Shadow'속성은 상자에 하나 이상의 드롭 섀도를 부착합니다. 이 속성은 쉼표로 구분 된 그림자 목록으로, 각각 2-4 길이 값, 선택적 색상 및 옵션 '삽입'키워드로 지정됩니다. 생략 된 길이는 0입니다. 생략 된 색상은 UA 선택된 색상입니다.

어디에

<shadow> = inset? && [ <length>{2,4} && <color>? ]

따라서, 당신은 같은 하위 부담을 줄 수 없습니다 box-shadow-direction:2px 0; 정의 후 box-shadow HTML 요소가 나올 때까지 또는 유사한 하위 항목이 다음 버전의 CSS에서 살기 위해 왔습니다.

Answer 2

상자 그림자는 다음과 같이 정의됩니다. XY 블러 스프레드 색상.

따라서 상자 그림자를 움직이고 싶다면 X와 Y를 변경하십시오.

box-shadow: 10px 10px 5px #000;

이 코드는 상단과 왼쪽에서 10px로 배치 된 블랙 박스 그림자를 만듭니다. (스프레드 금액을 지정할 필요가 없었습니다.)