해킹이나 이미지가없는 왼쪽 및 오른쪽 (가로?)면에 상자 그림자를 얻는 방법. 나는 사용하고있다 :
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
그러나 그것은 사방에 그림자를줍니다.
요소 주위에 테두리가 없습니다.
답변
참고 : 아래 @Hamish의 답변을 확인하는 것이 좋습니다 . 여기에 설명 된 솔루션의 불완전한 “마스킹”은 포함되지 않습니다.
여러 상자 그림자로 가까이 갈 수 있습니다. 각면에 하나씩
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
편집하다
블리드 스루를 마스킹하려면 상단 및 하단에 2 개의 상자 그림자를 추가하십시오.
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
답변
Deefour의 솔루션에 존재하는 그림자의 둥근 상단과 하단에 만족하지 않아서 내 자신을 만들었습니다.
inset
box-shadow
상단과 하단이 잘린 멋진 균일 한 그림자를 만듭니다.
당신의 요소의면에이 효과를 사용하려면이 개 의사 요소를 생성 :before
하고 :after
원래 요소의 측면에서 절대 위치.
div:before, div:after {
content: " ";
height: 100%;
position: absolute;
top: 0;
width: 15px;
}
div:before {
box-shadow: -15px 0 15px -15px inset;
left: -15px;
}
div:after {
box-shadow: 15px 0 15px -15px inset;
right: -15px;
}
div {
background: #EEEEEE;
height: 100px;
margin: 0 50px;
width: 100px;
position: relative;
}
<div></div>
편집하다
디자인에 따라 clip-path
@Luke의 답변에 표시된 것처럼 을 사용할 수 있습니다 . 그러나 대부분의 경우이 예에서 볼 수 있듯이 여전히 위쪽과 아래쪽에서 그림자가 점점 줄어 듭니다.
div {
width: 100px;
height: 100px;
background: #EEE;
box-shadow: 0 0 15px 0px #000;
clip-path: inset(0px -15px 0px -15px);
position: relative;
margin: 0 50px;
}
<div></div>
답변
이것을 시도하십시오, 그것은 나를 위해 일하고 있습니다 :
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
답변
고전적인 접근 방식 : 부정적 확산
CSS box-shadow 는 h-shadow, v-shadow, blur, spread의 4 가지 파라미터를 사용합니다 :
box-shadow: 10px 0 8px -8px black;
V 그림자 (수직의 그림자)를 0으로 설정된다.
흐림 매개 변수는 그라데이션 효과를 추가뿐만 아니라 수직 경계 (우리가 없애 원하는 일)에 약간의 그림자를 추가합니다.
네거티브 스프레드 는 모든 테두리의 그림자를 줄입니다. 측면에있는 그림자에 너무 많은 영향을주지 않으면 서 작은 세로 그림자를 제거하려고 시도 할 수 있습니다 (작은 그림자의 경우 5-10px).
여기에 바이올린 예제가 있습니다.
두 번째 접근 방식 : 측면의 절대 div
요소에 빈 div를 추가하고 절대 위치로 스타일을 지정하여 요소 내용에 영향을 미치지 않도록하십시오.
여기 왼쪽 그림자의 예를 가진 바이올린 .
<div id="container">
<div class="shadow"></div>
</div>
.shadow{
position:absolute;
height: 100%;
width: 4px;
left:0px;
top:0px;
box-shadow: -4px 0 3px black;
}
셋째 : 마스킹 그림자
고정 된 배경이있는 경우 배경색이 같은 두 개의 마스킹 그림자와 blur = 0으로 사이드 섀도 효과를 숨길 수 있습니다 (예 :
box-shadow:
0 -6px white, // Top Masking Shadow
0 6px white, // Bottom Masking Shadow
7px 0 4px -3px black, // Left-shadow
-7px 0 4px -3px black; // Right-shadow
검은 그림자에 음의 스프레드 (-3px)를 다시 추가 했으므로 모서리 너머로 늘어나지 않습니다.
여기 바이올린 .
답변
이것은 모든 브라우저에서 잘 작동합니다.
-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
답변
여러 개를 사용해야합니다 box-shadow;
. 삽입 속성은 멋지게 보이고 내부에 있습니다.
div {
box-shadow: inset 0 12px 15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
답변
또 다른 방법은 overflow-y:hidden
패딩이있는 부모에서입니다.
#wrap {
overflow-y: hidden;
padding: 0 10px;
}
#wrap > div {
width: 100px;
height: 100px;
box-shadow: 0 0 20px -5px red;
}