왼쪽 및 오른쪽에만 상자 그림자를 얻는 방법 왼쪽 및 오른쪽

해킹이나 이미지가없는 왼쪽 및 오른쪽 (가로?)면에 상자 그림자를 얻는 방법. 나는 사용하고있다 :

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

그러나 그것은 사방에 그림자를줍니다.

요소 주위에 테두리가 없습니다.

답변

참고 : 아래 @Hamish의 답변을 확인하는 것이 좋습니다 . 여기에 설명 된 솔루션의 불완전한 “마스킹”은 포함되지 않습니다.

여러 상자 그림자로 가까이 갈 수 있습니다. 각면에 하나씩

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

편집하다

블리드 스루를 마스킹하려면 상단 및 하단에 2 개의 상자 그림자를 추가하십시오.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

답변

Deefour의 솔루션에 존재하는 그림자의 둥근 상단과 하단에 만족하지 않아서 내 자신을 만들었습니다.

inset box-shadow 상단과 하단이 잘린 멋진 균일 한 그림자를 만듭니다.

당신의 요소의면에이 효과를 사용하려면이 개 의사 요소를 생성 :before하고 :after원래 요소의 측면에서 절대 위치.

div:before, div:after {
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  width: 15px;
}
div:before {
  box-shadow: -15px 0 15px -15px inset;
  left: -15px;
}
div:after {
  box-shadow: 15px 0 15px -15px inset;
  right: -15px;
}

div {
  background: #EEEEEE;
  height: 100px;
  margin: 0 50px;
  width: 100px;
  position: relative;
}
<div></div>

스 니펫 확장

편집하다

디자인에 따라 clip-path@Luke의 답변에 표시된 것처럼 을 사용할 수 있습니다 . 그러나 대부분의 경우이 예에서 볼 수 있듯이 여전히 위쪽과 아래쪽에서 그림자가 점점 줄어 듭니다.

div {
  width: 100px;
  height: 100px;
  background: #EEE;
  box-shadow: 0 0 15px 0px #000;
  clip-path: inset(0px -15px 0px -15px);
  position: relative;
  margin: 0 50px;
}
<div></div>

스 니펫 확장

답변

이것을 시도하십시오, 그것은 나를 위해 일하고 있습니다 :

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;

답변

고전적인 접근 방식 : 부정적 확산

CSS box-shadow 는 h-shadow, v-shadow, blur, spread의 4 가지 파라미터를 사용합니다 :

box-shadow: 10px 0 8px -8px black;

V 그림자 (수직의 그림자)를 0으로 설정된다.

흐림 매개 변수는 그라데이션 효과를 추가뿐만 아니라 수직 경계 (우리가 없애 원하는 일)에 약간의 그림자를 추가합니다.

네거티브 스프레드 는 모든 테두리의 그림자를 줄입니다. 측면에있는 그림자에 너무 많은 영향을주지 않으면 서 작은 세로 그림자를 제거하려고 시도 할 수 있습니다 (작은 그림자의 경우 5-10px).

여기에 바이올린 예제가 있습니다.

두 번째 접근 방식 : 측면의 절대 div

요소에 빈 div를 추가하고 절대 위치로 스타일을 지정하여 요소 내용에 영향을 미치지 않도록하십시오.

여기 왼쪽 그림자의 예를 가진 바이올린 .

<div id="container">
  <div class="shadow"></div>
</div>

.shadow{
    position:absolute;
    height: 100%;
    width: 4px;
    left:0px;
    top:0px;
    box-shadow: -4px 0 3px black;
}

셋째 : 마스킹 그림자

고정 된 배경이있는 경우 배경색이 같은 두 개의 마스킹 그림자와 blur = 0으로 사이드 섀도 효과를 숨길 수 있습니다 (예 :

box-shadow:
    0 -6px white,          // Top Masking Shadow
    0 6px white,           // Bottom Masking Shadow
    7px 0 4px -3px black,  // Left-shadow
    -7px 0 4px -3px black; // Right-shadow

검은 그림자에 음의 스프레드 (-3px)를 다시 추가 했으므로 모서리 너머로 늘어나지 않습니다.

여기 바이올린 .

답변

이것은 모든 브라우저에서 잘 작동합니다.

-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;

답변

데모

여러 개를 사용해야합니다 box-shadow;. 삽입 속성은 멋지게 보이고 내부에 있습니다.

div {
    box-shadow: inset 0 12px  15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px  8px -4px rgba(31, 73, 125, 0.8);
    width: 100px;
    height: 100px;
    margin: 50px;
    background: white;
}

답변

또 다른 방법은 overflow-y:hidden패딩이있는 부모에서입니다.

#wrap {
    overflow-y: hidden;
    padding: 0 10px;
}
#wrap > div {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 20px -5px red;
}

http://jsfiddle.net/qqx221c8/