Inset Box Shadow 한쪽에만?

Inset Box Shadow 한쪽에만?

---

어떻게 든 div의 한쪽에만 상자 그림자를 삽입 할 수 있습니까? 여기서는 일반적인 외부 상자 그림자가 아닌 삽입 상자 그림자 에 대해 이야기하고 있습니다 .

예를 들어, 다음 JSFiddle에서 삽입 그림자가 다양한 각도로 4면 모두에 나타나는 것을 볼 수 있습니다.

상단에만 표시되도록하려면 어떻게하나요? 아니면 기껏해야 상단과 하단에만?

JSFiddle : http://jsfiddle.net/ahmadka/KFrun/

HTML :

<div class="myDiv">
    <div class="text">
        Lorem ipsum ....
    </div>
</div>

CSS :

.box
{
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

.text
{
    padding:20px;   
}

---

이것이 당신이 찾고있는 것입니다. 그림자로 원하는 각면에 대한 예가 있습니다.

더 많은 예제는 js 바이올린을 참조하십시오 : http://jsfiddle.net/KFrun/171/

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

---

트릭 제이다 .box-inner원래 폭보다 큰 내부 .box와는 box-shadow그것에인가된다.

그런 다음 .text추가 된 너비를 보완하기 위해 에 더 많은 패딩을 추가했습니다.

논리는 다음과 같습니다.

다음은 CSS에서 수행되는 방법입니다.

최대 너비를 사용 하여 더 넓어 .inner-box지지 않도록하고 나머지가 잘리는 지 확인합니다..boxoverflow

.box {
    max-width: 100% !important;
    overflow: hidden;
}

110 %는 자식의 컨텍스트에서 100 % 인 부모보다 더 넓습니다 ( .box예 : 부모 가 고정 된 너비를 가질 때 동일해야 함 ). 음수 여백은 너비를 구성하고 요소가 중앙에 오도록합니다 (오른쪽 부분 만 숨기는 대신).

.box-inner {
    width: 110%;
    margin-left:-5%;
    margin-right: -5%;
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

그리고 더 넓은 부분을 보완하기 위해 X 축에 약간의 패딩을 추가합니다 .inner-box.

.text {
    padding: 20px 40px;
}

작동하는 Fiddle이 있습니다.

Fiddle을 검사하면 다음이 표시됩니다.

---

꽤 늦었지만 패딩을 변경하거나 div를 추가 할 필요가없는 중복 답변은 여기에서 찾을 수 있습니다. Box-shadow Inset bottom에만 문제가 있습니다 . "확산 거리를 정의하는 네 번째 길이에 음수 값을 사용하십시오. 이것은 종종 간과되지만 모든 주요 브라우저에서 지원됩니다."

응답자의 바이올린에서 :

box-shadow: inset 0 -10px 10px -10px #000000;

---

이것은 약간 가까워집니다.

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}

---

시도해보세요. 유용 할 수도 있습니다 ...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9;
                    -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;  

위의 CSS원인은 하단에 상자 그림자가 있습니다.
당신은 여기에 더 빨간 수 있습니다

---

윗면에만 상자 그림자 삽입?

#box {
            background: #CCC;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            font: bold 18px/1.2em sans-serif;
            height: auto;
            margin: 15px auto;
            padding: 75px 15px 25px;
            text-align: center;
            width: 80%;
        }

참고 URL : https://stackoverflow.com/questions/17572619/inset-box-shadow-only-on-one-side