요소의 한쪽에만 그림자를 만드는 방법은 무엇입니까?

맨 아래에만 그림자를 떨어 뜨리는 방법이 있습니까? 서로 옆에 2 개의 이미지가있는 메뉴가 있습니다. 올바른 이미지와 겹치므로 올바른 그림자를 원하지 않습니다. 나는 이것을 위해 이미지를 사용하고 싶지 않으므로 아래처럼 이미지를 떨어 뜨릴 수있는 방법이 있습니다.

box-shadow-bottom: 10px #FFF; 아니면 비슷한?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

업데이트 4

업데이트 3과 동일하지만 최신 CSS (= 규칙 없음)로 의사 요소에 특별한 위치 지정이 필요하지 않습니다.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

업데이트 3

이전의 모든 답변은이 효과를 만들기 위해 추가 마크 업을 사용했으며 반드시 필요한 것은 아닙니다. 나는 이것이 훨씬 깨끗한 해결책 이라고 생각합니다 ... 유일한 트릭은 그림자의 올바른 위치 / 그림자의 올바른 위치를 얻기 위해 값을 가지고 노는 것입니다. 다음은 의사 요소를 사용하는 새로운 바이올린입니다 .

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

HTML

<div id="box" class="box-shadow"></div>

CSS

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

업데이트 2

분명히 다른 사람들이 지적한 것처럼 상자 그림자 CSS에 대한 추가 매개 변수 로이 작업을 수행 할 수 있습니다. 데모는 다음과 같습니다.

http://jsfiddle.net/K88H9/821/

CSS

-webkit-box-shadow: 0 4px 4px -2px #000000;
   -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -2px #000000;

이것은 더 나은 해결책이 될 것입니다. 추가되는 추가 매개 변수는 다음과 같습니다.

네 번째 길이는 확산 거리입니다. 양수 값을 지정하면 그림자 모양이 지정된 반경만큼 모든 방향으로 확장됩니다. 음수 값을 지정하면 그림자 모양이 축소됩니다.

최신 정보

jsFiddle에서 데모를 확인하십시오 : http://jsfiddle.net/K88H9/4/

내가 한 것은 그림자를 갖고 자하는 실제 요소 뒤에 숨길 "그림자 요소"를 만드는 것입니다. "그림자 요소"의 너비를 지정한 그림자의 2 배만큼 실제 요소보다 너비가 좁게 만들었습니다. 그런 다음 올바르게 정렬했습니다.

HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

CSS

#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

원래 답변

예, 제공 한 것과 동일한 구문으로이 작업을 수행 할 수 있습니다. 첫 번째 값은 가로 위치를 제어하고 두 번째 값은 세로 위치를 제어합니다. 따라서 첫 번째 값을 0px다음과 같이 원하는 오프셋으로 설정하십시오 .

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

상자 그림자에 대한 자세한 내용은 다음을 확인하십시오.

• http://www.css3.info/preview/box-shadow/
• https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
• http://www.w3.org/TR/css3-background/#the-box-shadow

이게 도움이 되길 바란다.

그림자를 작게하려면 스프레드 매개 변수를 사용하십시오.

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}

<div class="shadow">Some content</div>

라이브 데모 : http://dabblet.com/gist/a8f8ba527f5cff607327

측면에 그림자가 표시되지 않게하려면 (확산 값) 스프레드 반경 (4 번째 매개 변수)이 흐림 반경 (3 번째 매개 변수)과 같아야합니다.

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

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

검은 그림자는 마지막이어야하며 모서리 너머로 확장되는 것을 방지하기 위해 마이너스 스프레드 (-3px)가 있어야합니다.

여기에서 바이올린 (마스킹 그림자의 색상을 변경하여 실제로 어떻게 작동 하는지 확인하십시오 ).

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>

나는 이것이 당신이 추구하는 것이라고 생각합니까?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

사양 을 읽는 것이 항상 좋습니다 . box-shadow-bottom속성 이 없으며 Lea가 지적한 것처럼 접두사가 붙은 속성 뒤에 항상 접두사가없는 속성을 맨 아래에 배치해야합니다.

그래서 그것은 :

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}

<div class="shadow">Some content</div>

오버플로가 숨김으로 설정되고 맨 아래에 일부 패딩이있는 포함 div를 사용하는 것은 어떻습니까? 이것은 가장 간단한 해결책처럼 보입니다.

내가 이것을 스스로 생각하지는 않았지만 다른 곳에서 본 것은 유감 입니다 .

요소를 사용하여 상자 그림자와 오버플로를 얻는 요소를 감싸는 경우 래퍼에 숨겨져 있으면 여분의 상자 그림자가 사라지고 여전히 사용 가능한 테두리가 생길 수 있습니다. 이것은 또한 확산으로 인해 요소가 작은 것처럼 보이는 문제를 해결합니다.

이처럼 :

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

내용은 여기

순수한 CSS로 수행해야 할 때도 여전히 영리한 솔루션입니다!

Jorgen Evens가 말했듯이 .

clip-path넘칠 가장자리를 모두 표시 (숨기기) 하는 데 사용할 수 있지만 표시하려는 가장자리를 잘라낼 수도 있습니다 .

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

클립 경로 (MDN)를 참조하십시오 . 인수 polygon는 왼쪽 위 점, 오른쪽 위 점, 오른쪽 아래 점 및 왼쪽 아래 점입니다. 아래쪽 가장자리를 200%(또는보다 큰 수로 100%) 설정하면 오버플로가 아래쪽 가장자리로만 제한됩니다.

또한 그림자가 필요했지만 이미지 아래에서만 약간 왼쪽과 오른쪽으로 설정되었습니다. 이것은 나를 위해 일했다 :

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

이 요소가 적용되는 요소는 페이지 전체 이미지 (980px x 300px)입니다.

설정을 조정할 때 도움이되면 다음과 같이 실행됩니다.

수평 그림자, 수직 그림자, 흐림 거리, 확산 (예 : 그림자 크기) 및 색상.

그림자를 찾는 것이 좋습니다.

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

이 코드는 현재 stackoverflow 웹에서 사용 중입니다.

이 코드 펜 (내가 아님) 은이 작업과 다른면을 자체적으로 수행하는 매우 간단한 방법을 보여줍니다.

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

https://codepen.io/zeckdude/pen/oxywmm

배경이 단단하거나 CSS를 사용하여 재현 할 수있는 경우 다음과 같이 선형 그라디언트를 사용할 수 있습니다.

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

이렇게하면 30 % 불투명도의 검은 색에서 완전 투명에 이르기까지 요소 하단에 5px 그라디언트가 생성됩니다. 요소의 나머지 부분은 흰색 배경입니다. 물론 선형 그라디언트의 마지막 2 개의 색상 정지 점을 변경하면 배경을 완전히 투명하게 만들 수 있습니다.

바닥에 그라디언트를 만들 수도 있습니다. 원하는 그림자가 이미 반투명 한 요소에 있었기 때문에 도움이되었으므로 클리핑에 대해 걱정할 필요가 없었습니다.

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

"bottom"및 "height"속성을 일치시키고 rgba 값을 그림자의 위 / 아래에 원하는 값으로 설정하십시오.

다음과 같이 할 수 있습니다.

일반적인 문법 :

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

예 : 우리는 붉은 색으로 아래쪽 상자 그림자 만 만들고 싶습니다.

그렇게하려면 하단 상자 그림자 옵션을 설정해야하는 모든 측면 옵션을 설정하고 다음과 같이 모든 다른 옵션을 비워 두어야합니다.

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

다른 사람의 경우 흰색 대신 투명면을 업데이트하여 다른 색상 배경에서도 작동합니다.

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

내부 그림자

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>