왼쪽과 오른쪽에만 상자 그림자를 표시하는 방법
해킹이나 이미지 없이 왼쪽과 오른쪽(수평?) 측면에만 상자 그림자를 표시할 수 있습니다.사용 중:
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의 대답에 나타난 바와 같이그러나 대부분의 경우 이로 인해 위쪽과 아래쪽에서 그림자가 점점 가늘어집니다.이 테이퍼는 미묘하며 색상 구성과 흐림 반경에 따라 적합할 수 있습니다.볼 수 두 했습니다. 다음과 같습니다. 이 예 에 서 두 번 상 자 추 를 습 했 니 가 다 째 록 있 도 수 테 는 볼 이 퍼 쉽 를 게 니 다 ▁in 습 했 ▁to 가 이 추
div {
width: 100px;
height: 50px;
background: #EEE;
box-shadow: 0 0 15px 0px #000;
clip-path: inset(0px -15px 0px -15px);
position: relative;
margin: 0 50px;
}<div>1</div>
<div>2</div>음의 확산 및 마스킹 그림자
CSS 박스섀도는 4개의 매개 변수를 사용합니다.h-shadow, v-shadow, blur, spread:
box-shadow: 10px 0 8px -8px black;
그blur매개 변수는 그라데이션 효과를 추가하지만 위쪽 및 아래쪽 테두리에 약간의 그림자도 추가합니다.이러한 부작용을 제거하기 위해 다음을 사용할 수 있습니다.
입니다.
spread모든 테두리의 그림자를 줄입니다. 측면의 그림자에 큰 영향을 주지 않고 수직 그림자를 제거하려고 시도하면서 플레이할 수 있습니다(작은 그림자의 경우 5~10인치가 더 쉽습니다).배경색(이 경우 흰색)이 같은 색상의 그림자를 마스킹하여 티커 그림자를 허용합니다.이 마스킹 그림자는 부작용을 완전히 덮으려면 흐림 = 0이어야 합니다.
다음 두 가지 예에서는 마스킹 그림자를 사용합니다.
div{
width: 100px;
height: 100px;
border: 1px solid green;
margin: 10px;
float: left;
}
#example1{
box-shadow: -10px 0 8px -8px black, 10px 0 8px -8px black;
}
#example2{
box-shadow:
0 -6px white,
0 6px white,
-7px 0 4px -3px black,
7px 0 4px -3px black;
}<div id="example1"></div>
<div id="example2"></div>이러한 접근 방식이 필요에 맞지 않으면 기존의 모든 div 측면에 절대 div를 추가할 수도 있습니다.
컨테이너 디바를 다음과 같이 설정하는 것을 기억하세요.position: relative그래서 이 절대적인 디브는 안에 머물 것입니다.
#example3 {
position: relative;
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid green;
}
.shadow {
position: absolute;
height: 100%;
width: 4px;
left: 0px;
top: 0px;
box-shadow: -4px 0 3px black;
}<div id="example3">
content here
<div class="shadow"></div>
</div>이것을 사용해 보세요, 저에게 효과가 있어요.
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
clip-path현재(2020)는 특히 다음과 같이 특정 가장자리에서 필요한 효과가 "클린 컷" 그림자일 때 요소의 특정 측면에서 박스 그림자를 달성하는 가장 좋은 방법입니다.
.shadow-element {
width: 100px;
height: 100px;
background-color: #FFC300;
box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px -15px);
/* position and left properties required to bring element out from edge of parent
so that shadow can be seen; margin-left would also achieve the same thing */
position: relative;
left: 15px;
}<div class="shadow-element"></div>...다음과 같은 약화/감소/희박한 그림자와는 대조적입니다.
.shadow-element {
width: 100px;
height: 100px;
background-color: #FFC300;
box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);
/* position and left properties required to bring element out from edge of parent
so that shadow can be seen; margin-left would also achieve the same thing */
position: relative;
left: 15px;
}<div class="shadow-element"></div>다음 CSS를 해당 요소에 적용하기만 하면 됩니다.
box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);
위치:
Apx상단 모서리에 대한 그림자 가시성을 설정합니다.Bpx맞다Cpx맨 아래Dpx왼쪽
그림자를 숨겨야 하는 가장자리에 대해 0의 값과 음수 값을 입력합니다(흐림 반경 + 확산 값의 결합 결과와 동일).Xpx + Ypx) 그림자가 표시되어야 하는 가장자리로 이동합니다.
또 다른 방법은overflow-y:hidden패딩이 있는 상위 항목:
body {
padding: 30px;
}
#wrap {
overflow-y: hidden;
padding: 0 10px;
}
#wrap > div {
width: 100px;
height: 100px;
box-shadow: 0 0 20px -5px red;
}<div id="wrap">
<div></div>
</div>다중을 사용해야 합니다.box-shadow;.inset내부와 내부를 아름답게 보이게 하는 특성:
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;
}<div></div>이것은 모든 브라우저에서 정상적으로 작동합니다.
-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;
이미지의 오른쪽과 왼쪽 또는 다른 콘텐츠에 멋진 삽입 그림자를 사용하려면 다음과 같이 사용합니다.z-index:-1이미지 또는 내부 개체를 삽입된 상태로 표시할 때 유용한 트릭을 수행합니다.
.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}
.innercontent{
z-index:-1
}<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>경우에 따라 다른 컨테이너 옆에 그림자를 숨길 수 있습니다.예, 그림자가 있는 DIV 위와 아래에 DIV가 있다면, 당신은position: relative; z-index: 1;주변 DIV에 있습니다.
또 다른 아이디어는 그림자를 모방하기 위해 결국 투명성으로 어둡고 흐릿한 유사 요소를 만드는 것일 수 있습니다.예를 들어 높이는 약간 줄이고 폭은 더 넓게 만듭니다.
그림자를 "지우기" 위해 그 안에 1div를 사용할 수 있습니다.
.yourdiv{
position:relative;
width:400px;
height:400px;
left:10px;
top:40px;
background-color:white;
box-shadow: 0px 0px 1px 0.5px #5F5F5F;
}
.erase{
position:absolute;
width:100%;
top:50%;
height:105%;
transform:translate(0%,-50%);
background-color:white;
}
"높이:%;" 및 "폭:%;"로 재생하여 원하는 그림자를 지울 수 있습니다.
저는 부트스트랩 섀도우-sm을 오른쪽에 복사하려고 했습니다. 여기 제 코드가 있습니다.
.shadow-rs{
box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}
이것은 저에게 효과가 있었습니다.
box-shadow: 0 5px 5px 0 #000;
div 위에 화살표를 표시하려면 다음을 사용합니다.
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
수평인 경우에만, 당신은 그것을 속일 수 있습니다.box-shadow상위 div에서 오버플로 사용:
.parent{
overflow:hidden;
}
.box-shadow{
box-shadow: box-shadow: 0 5px 5px 0 #000;
}<div class="parent">
<div class="box-shadow">content</div>
</div>언급URL : https://stackoverflow.com/questions/11997032/how-to-get-box-shadow-on-left-right-sides-only
'sourcetip' 카테고리의 다른 글
| Powershell: match 연산자가 true를 반환하지만 $matches가 null입니다. (0) | 2023.08.16 |
|---|---|
| PowerShell을 사용하여 SFTP에 파일 업로드 (0) | 2023.08.16 |
| jQuery를 사용하여 모든 확인란을 확인하는 방법은 무엇입니까? (0) | 2023.08.16 |
| 두 개 이상의 항목을 루프할 때 루프가 끊기는 동안 MariaDB 절차 (0) | 2023.08.16 |
| Android에서 clipToPadding 속성은 무엇을 합니까? (0) | 2023.08.16 |