CSS가 어린이 DIV에 대해 CSS를 들어 올렸음

CSS를 사용하여 DIV의 들어 올림 모서리를 만들 수있었습니다. 다음은 jsfiddle 링크입니다. Here CSS가 어린이 DIV에 대해 CSS를 들어 올렸음

부모와 마찬가지로 모서리를 들어 올린 많은 하위 DIV를 설계해야합니다. 내가 어떻게 이걸 만들 수 있니?

2012-10-15 jeewan

jsFiddle에 .lifted 클래스가 있습니다. 원하는 다른 모든 div에서 동일한 수업을 사용할 수 있습니다.

2012-10-15 20:10:14 Simone

당신은 바이올린을 편집하고 코드를 작성해주십시오. 나는 너를 시도했지만, 나는 일하지 않았다. – jeewan

http://jsfiddle.net/Fa5x8/ – Simone

그러나 "child-one"div의 해제 된 코너의 그림자는 표시되지 않습니다. "drop-shadow lifted"클래스의 부모 DIV 내부에서 생성 한 모든 자식에서 "해제 된 모서리 그림자"가 필요합니다. – jeewan

이상적으로는 simone의 대답이 작동하는 지점으로 코드를 가져오고 싶을 것입니다. 그 시점에 도달하는 데 약간의 노력이 필요할 수 있습니다!

첫 번째 문제는 drop-shadow 및 lifted 클래스가 독립적이지 않기 때문에 발생합니다. in this ugly JSFiddle에서 볼 수 있듯이 그림자를 표시 할 div에 (수정 한) drop-shadow 클래스를 추가해야합니다.

그러나 drop-shadow 클래스를 수정해야했습니다. 내가 한 것은 drop-shadow:before, drop-shadow:after 셀렉터의 'z-index'값을 없애고 자식의 그림자를 숨기는 것입니다. div.

이로부터 우리가 처음 만들어야 할 편집 내용을 볼 수 있습니다. 당신은 (당신이 content를 설정하지 않을 경우 before 및 after pseudoelements가 표시되지 않습니다 기억) 그림자를 볼 수 있도록하는 것이 필요하다

.lifted:after, 
.lifted:before { 
    position: absolute; 
    content: ""; 
}

를 추가해야합니다. 그러나 이것은 충분하지 않습니다. 그 이유는 귀하의 absolute 포지셔닝이 두 개의 그림자를 서로 겹쳐 놓기 때문입니다.

Go to this JSFiddlediv 어린이의 lifted 클래스를 추가/삭제한다는 의미입니다.

This JSFiddle은 거의 수정되지만, 그렇지 않은 이유는 this question and answer입니다. 당신은 그것을 사용하여 문제를 해결할 수 있어야합니다.

2012-10-15 20:28:36 jmeas

안녕하세요 jmeas, 답장과 바이올린 코드에 감사드립니다. 내 요구 사항을 수정하려고하지만 여전히 얻을 수 없습니다. 이 답변의 해결책을 살펴 보겠습니다. 고맙습니다. – jeewan

문제 없습니다. 다시 말하면, 솔루션을 명시 적으로 기술하기 위해서':: before'와'after' 의사 요소가 부모 내부에 위치하기 때문에 ('div's, 아마도) 요소를 쌓을 때 비 의미 론적 코드를 사용해야 할 것입니다 요소. – jmeas

답변