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

Question 1

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

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

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

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

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

Question 2

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

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

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

Question 3

난 당신이 정말 필요가 있다고 생각하지 않습니다 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>

Question 4

다음 예제와 같이 부모 상자에서 일반 그림자가 잘린 요소 :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>

Question 5

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

SCSS (나침반 포함) 예 :

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

Question 6

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

Question 7

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

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

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

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

Question 8

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

http://jsfiddle.net/Vehdg/

Question 9

나도이 문제가 있었다. 내가 찾은 해결책은 여러 개의 상자 그림자 (그림자를 원하는 각면에 하나씩)였습니다. 정의는 다음과 같습니다.

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

생각하는 방법은 다음과 같습니다.

먼저 스프레드를 0으로 만듭니다 (이렇게하면 모든면에서 효과가 비활성화 됨).
h 오프셋 (양수로 설정하면 왼쪽에, 음수로 설정하면 오른쪽에 캐스트됩니다)
v-offset (양수로 설정하면 위쪽에 캐스트되고 음수로 설정하면 아래쪽에

여기에서 3면에 박스 섀도우가있는 제 케이스를 볼 수 있습니다. ) https://codepen.io/cponofrei/pen/eMMyQX

Question 10

div를 설정 overflow:hidden하고 테두리를 따라 그림자 요소를 추가하여 단면 내부 그림자를 만들 수 있습니다.

분할의 위쪽 및 아래쪽 테두리에 내부 그림자를 설정합니다.

HTML

<div id="innerShadow">
    <div id="innerShadowTop">
        Content...
    <div id="innerShadowBottom">
</div>

CSS

#innerShadow
{
    position: relative;
    overflow: hidden;
}

#innerShadowTop
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -1px;
    -moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}

#bannerShadowBottom
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -1px;
    -moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}

Question 11

box-shadow사방 모두를위한 것입니다. 당신은 그것을 바꿀 수 없습니다 (아직?). 의 4 개 크기 box-shadow의 정의는 OffsetX, offsetY, Blur와 Spread.

Question 12

여러 상자 그림자가 나에게 트릭을 제공했습니다.

box-shadow:
        inset 0 -8px 4px 4px rgb(255,255,255),
        inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

http://jsfiddle.net/kk66f/