[css] CSS3 box-shadow : inset은 한면 또는 두 면만 할 수 있습니까? 경계선처럼?

Program / 글쓴이

css3의 측면 특정 내부 그림자에 대한 지원에 대해 궁금합니다.

나는 이것이 지원되는 브라우저에서 잘 작동한다는 것을 알고 있습니다.

div { box-shadow:inset 0px 1px 5px black; }

나는 다음과 같은 것을 달성하는 방법이 있는지 궁금합니다. 

div { box-shadow-top:inset 0px 1px 5px black; }

답변

이것은 나를 위해 일한 것입니다.

box-shadow: inset 1px 4px 9px -6px;

예 : http://jsfiddle.net/23Egu/

답변

난 당신이 정말 필요가 있다고 생각하지 않습니다 box-shadow-top당신이 설정 한 경우 때문에 offsetx0과offsety 양수 값으로 설정하면 남은 그림자 만 맨 위에 .

상단에는 그림자를, 하단에는 그림자를 적용하려면 두 개의 div를 사용하면됩니다.

<div style="box-shadow:inset 0 1px 5px black;">
  <div style="box-shadow:inset 0 -1px 5px black;">
    some content
  </div>
</div>

측면의 그림자를 없애고 싶다면 색상 rgba대신 사용 hex하고 더 크게 설정하십시오 offsety.

box-shadow:inset 0 5px 5px rgba(0,0,0,.5)

이렇게하면 그림자가 더 불투명 해 지므로 측면이 숨겨지고 오프셋이 많을수록 불투명도가 낮아집니다.

전체 예 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
                box-shadow:inset 0px 5px 5px rgba(0,0,0,.5);
            }
            div > div {
                background:none;
                box-shadow:inset 0px -5px 5px rgba(0,0,0,.5);
            }
        </style>
    </head>
    <body>
        <div><div></div></div>
    </body>
</html>

답변

다음 예제와 같이 부모 상자에서 일반 그림자가 잘린 요소 :before및 after요소 사용 overflow:hidden: http://dabblet.com/gist/2585782

CSS

/**
 * Top and Bottom inset shadow
 */


#element{
  background-color: #E3F2F7;
  height: 55px;
  position: relative; /* to position pseudo absolute*/
  overflow: hidden; /* to cut of overflow shadow*/
  margin-top: 200px;
}

#element:before , #element:after{
  content: "\0020";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px; /* when 0 no shadow is displayed*/
  box-shadow: #696c5c 0 0 8px 0;
}

#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px}  /* because of height: 1*/

HTML

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

답변

대부분의 경우 해결을 위해 배경 그라데이션을 사용할 수 있습니다.

SCSS (나침반 포함) 예 :

@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );

답변

box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);

이것은 단지 사랑스럽게 작동합니다 🙂

다음은 코드 펜입니다.
http://codepen.io/poopsplat/pen/cGBLy

답변

동일한 그림자이지만 상단에만 :

box-shadow: inset 0px 6px 5px -5px black;

한 방향으로 그림자를 가지려면 “spread”매개 변수로 “blur”매개 변수를 무효화 한 다음 동일한 값으로 “h-pos”및 / 또는 “v-pos”매개 변수를 조정해야합니다. 반대쪽 테두리 나 삼중 테두리에서는 작동하지 않습니다. 정의를 하나 더 추가해야합니다.

여기에 더 많은 예 : http://codepen.io/GBMan/pen/rVXgqP

답변

아니요, 직접적으로는 아니지만 다음을 사용하여 div에 넣어 원하지 않는 부분을자를 수 있습니다 overflow: hidden.

http://jsfiddle.net/Vehdg/