두 개의 엘리먼트가있어 사이드가 터치되도록 배치되었습니다. 그들은 접촉면에서 다른 치수/크기를 갖는다. 둘 다 밑에 그림자가 있어야합니다.박스 - 섀도우를 HTML 엘리먼트 그룹으로 설정
그림자는 항상 형제 요소 위에 중첩되어 있습니다. 나는 z-index을 가지고 놀 수 있습니다.하지만 그것은 단지 두 가지 중 어느 것이 형제의 그림자에 의해 중첩되는지를 선택한다는 것을 의미합니다.
섀도우가 요소 뒤에 간섭을받지 않고 그룹 뒤에 렌더링되고 섀도우가 수직 계열화에 상관없이 그림자를 추가 할 수 있다면 좋을 것입니다.
그림자 이미지를 사용하지 않고도 CCS3에서 비슷한 효과를 얻을 수 있습니까?
귀하의 문제에 대한 이해에 따라 데모를 만들었습니다. 뭔가 잘못되었을 때 의견을 남기십시오! Demo Link
@RobertKoritnik @RobertKoritnik @RobertKoritnik @RobertKoritnik 그림자를 다른 색상으로 업데이트하여 표시했습니다. –
그래, 두 요소의 컨테이너를 추가하고 컨테이너에 그림자를 넣었습니다. 그룹화 할 때 두 요소가 여전히 직사각형을 차지하므로 접촉하는면에서 두 요소의 치수가 같으면 좋습니다. 문제는 내 요소가 [이 데모] (http://codepen.io/anon/pen/sIAvm)와 같이 감동적인 측면에서 서로 다른 크기를 갖는다는 것입니다. (나는 그에 따라 나의 질문을 업데이트했다). –
@RobertKoritnik 다시 동일한 데모 링크를 시도하고 올바른 방향으로 가고 있는지 확인할 수 있습니까? –
한 다른 방법 클립을 사용하는 것입니다 :
div {
display: block;
box-shadow: 0 0 10px 2px black;
background-color: #fff;
background: linear-gradient(180deg, red, white 30px);
}
#one {
height: 200px;
width: 200px;
margin-left: 50px;
position: relative;
}
#two {
height: 50px;
width: 50px;
margin: 0 0 0 -50px;
position: absolute;
clip: rect(-10px, 50px, 100px, -10px);
}
장점 : 잘합니다 (DIV 번호 2 작동 위치 절대한다 : 현재 (구배 배경으로 demontrated 같이) div의 전체 범위
단점을 사용하여 , 또는 고정; 하지만 어쨌든 원하는 위치가 없습니다.
흥미 롭습니다. 엘리먼트가 닿는 윗부분의 그림자 부분에는 약간의 틈이있는 것처럼 보이므로 크롬에는 일종의 결함이있는 것으로 보입니다. –
당신은 맞습니다. #one의 그림자가 "아래로"내려가는 지점이 있습니다. 말하자면 그림자는 연속성을 잃습니다. Chrome의 문제라고 생각하지는 않지만 기술의 실패입니다. 그러나, 나는 그것이 몇몇 상황에서 유용 할 수 있다고 생각한다; 아마도 그 방향으로 그림자를 설정하는 것이 고정 될 수 있습니다. – vals
비슷하지만 다소 반전 된 * 글리치 *가 허용되는 해결책이 있습니다. 귀하의 경우와 동일한 지점에서 그림자가 강해집니다. 그림자가 더 어둡거나 더 멀리 퍼질 때 더욱 두드러집니다. –
내부에 그림이있는 경우 왜 4 개 div가 없습니까? 두 개는 그림자, 그 다음 두 개는 위쪽, 같은 좌표 및 그림자 없음, 그냥 배경 이미지
조금 더 명확하게하기 위해 조금 바 꾸었습니다. http : // jsfiddle.net/2P964/1/ 그림자를 덮기위한 비트 선택자 : 후 선택자로 재생해야합니다. – user1525612
그것은 올바른 방향으로 나를 가리키는 매우 흥미로운 접근 방식입니다. [이 JSFiddle] (http://jsfiddle.net/uyEBJ/) 내가 사용하고있는보다 실제 예를 보여줍니다. DIV는 중첩되어 있습니다. 하지만 기본적으로 당신의 기술을 사용하여 만들 수있었습니다. ** 정말로 매끄러운. ** –
조금 업데이트. http://jsfiddle.net/2P964/2/ – user1525612