[css] 한쪽에만 삽입 상자 그림자를 만드는 방법은 무엇입니까?

Program / 글쓴이

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

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

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

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

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

.text {
  padding: 20px;
}
<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

스 니펫 확장

답변

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

.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을 검사하면 다음이 표시됩니다.

.상자
.box-inner
.본문

답변

꽤 늦었지만 패딩을 변경하거나 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원인은 하단에 상자 그림자가 있습니다.
당신은 여기에 더 빨간 수 있습니다

답변

이것은 당신이 찾고있는 정확한 것이 아닐 수도 있지만 다음 rgba과 함께 사용하여 매우 유사한 효과를 만들 수 있습니다 linear-gradient.

  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

이렇게하면 50 % 불투명도 ( rgba(0,0,0,.5))의 검정 에서 투명 ( rgba(0,0,0,0)) 까지 선형 그라데이션이 만들어지며 상단에서 30 % 투명하게 시작됩니다. 이러한 값을 사용하여 원하는 효과를 만들 수 있습니다. deg-value ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%))를 추가하거나 색상을 전환하여 다른쪽에 둘 수 있습니다 . 각기 다른 각도와 같은 정말 복잡한 그림자를 원한다면 레이어링을 시작할 수도 linear-gradient있습니다.

다음은 실제로 작동하는 코드입니다.

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}
<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

스 니펫 확장

답변

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

#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%;
        }