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

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/

clip-path(2020)은 요소의 특정 측면에서 상자 그림자를 달성하는 가장 좋은 방법입니다. 특히 필요한 효과가 다음 과 같이 특정 가장자리에서 "깨끗한 컷"그림자 인 경우 :

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px -15px);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

... 감쇠 / 감소 / 얇은 그림자와는 대조적으로 :

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

문제의 요소에 다음 CSS를 적용하기 만하면됩니다.

box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

어디:

• Apx 상단 가장자리의 그림자 가시성을 설정합니다
• Bpx 권리
• Cpx 바닥
• Dpx 왼쪽

그림자를 숨겨야하는 가장자리의 경우 0을, 그림자를 표시해야하는 가장자리의 음수 값 (흐림 반경 + 스프레드 값의 결합 결과-와 동일 Xpx + Ypx)을 입력하십시오.

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

그것은 내 편에서 작동합니다. 희망이 도움이됩니다.

DIV, 이미지 또는 내부 콘텐츠의 왼쪽 및 오른쪽에 멋진 삽입 그림자

이미지 또는 다른 콘텐츠의 오른쪽과 왼쪽에 멋진 삽입 그림자를 만들려면 다음과 같이 사용하십시오.

*** Z- 색인 : -1은 삽입 된 이미지 나 내부 객체를 표시 할 때 유용한 방법입니다.

<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>

<style>

.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}

.innercontent{
z-index:-1
}
</style>
</html>

경우에 따라 다른 컨테이너로 그림자를 숨길 수 있습니다. 예를 들어 그림자가있는 DIV 위와 아래에 DIV가 있으면 position: relative; z-index: 1;주변 DIV에서 사용할 수 있습니다 .

수평의 경우에만 부모 div에서 오버플로를 사용하여 상자 그림자를 속일 수 있습니다.

<div class="parent">
  <div class="box-shadow">content</div>
</div>

.parent{
  overflow:hidden;
}
.box-shadow{
  box-shadow: box-shadow: 0 5px 5px 0 #000;
}

또 다른 아이디어는 그림자를 모방하기 위해 투명하게 어두운 흐린 의사 요소를 만드는 것일 수 있습니다. 높이가 더 작고 너비가 더 넓습니다.

그 안에 1 div를 사용하여 그림자를 "삭제"할 수 있습니다.

.yourdiv{
    position:relative;
    width:400px;
    height:400px;
    left:10px;
    top:40px;
    background-color:white;
    box-shadow: 0px 0px 1px 0.5px #5F5F5F;

}
.erase{
    position:absolute;
    width:100%;
    top:50%;
    height:105%;
    transform:translate(0%,-50%);
    background-color:white;
}

"height : %;"로 놀 수 있습니다 "width : %;" 원하는 그림자를 지우려면

어떤 이유로 든 여기에 제공된 답변은 제 경우에는 효과가 없습니다. 그래서 창의력을 얻었습니다. 다음 linear-gradient()대신 사용하는 새로운 솔루션이 있습니다 box-shadow.

p {
  padding: 1rem;
  background-color: #b55;
  color: white;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0) .5rem, rgba(0,0,0,0), rgba(0,0,0,0.0) calc(100% - .5rem), rgba(0,0,0,0.5));
}

<p>Testing</p>

나는 요점을 주장하지는 않겠지 만, 이것은 실제로 우리가 형성하려는 "상자"가 아니기 때문에 처음에는 box-shadow이해가되지 않는다고 말할 수 있습니다 .

오른쪽에 부트 스트랩 shadow-sm을 복사하려고했습니다. 내 코드는 다음과 같습니다.

.shadow-rs{
    box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}