요소의 한쪽에만 드롭 섀도우를 만드는 방법은?
그림자를 바닥에만 떨어뜨릴 수 있는 방법이 방법이 있습니까?저는 두 개의 이미지가 나란히 있는 메뉴가 있습니다.오른쪽 그림자는 오른쪽 이미지와 겹치기 때문에 원하지 않습니다.저는 이미지를 사용하는 것을 좋아하지 않는데, 아래쪽으로만 아래로 떨어뜨릴 수 있는 방법이 있을까요?
box-shadow-bottom: 10px #FFF;아니면 비슷한 건가요?
-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
업데이트 4
업데이트 3과 동일하지만 현대적인 CSS(= fewer 규칙)로 유사 요소에 대한 특별한 위치 지정이 필요하지 않습니다.
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
position: absolute;
top: calc(10% - 10px);
left: calc(50% - 80px);
}
.box-shadow:after {
content:"";
position:absolute;
width:100%;
bottom:1px;
z-index:-1;
transform:scale(.9);
box-shadow: 0px 0px 8px 2px #000000;
}<div id="box" class="box-shadow"></div>업데이트 3
이전의 모든 답변들은 이 효과를 만들기 위해 추가 마크업을 사용해 왔습니다. 이 효과는 꼭 필요한 것은 아닙니다.이것이 훨씬 더 깨끗한 해결책이라고 생각합니다.그림자의 정확한 위치와 그림자의 정확한 강도/투명도를 얻기 위해 값을 가지고 노는 것이 유일한 방법입니다.다음은 의사 요소를 사용한 새로운 바이올린입니다.
http://jsfiddle.net/UnsungHero97/ARRRZ/2/
HTML
<div id="box" class="box-shadow"></div>
CSS
#box {
background-color: #3D6AA2;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}
업데이트 2
다른 사람들이 방금 지적한 것처럼 상자 그림자 CSS에 대한 추가 매개 변수만 있으면 이 작업을 수행할 수 있습니다.데모는 다음과 같습니다.
http://jsfiddle.net/K88H9/821/
CSS
-webkit-box-shadow: 0 4px 4px -2px #000000;
-moz-box-shadow: 0 4px 4px -2px #000000;
box-shadow: 0 4px 4px -2px #000000;
이것이 더 나은 해결책이 될 것입니다.추가되는 추가 파라미터는 다음과 같이 설명됩니다.
네 번째 길이는 퍼짐 거리입니다.양의 값을 사용하면 그림자 모양이 지정된 반경만큼 모든 방향으로 확장됩니다.음의 값을 가지면 그림자 모양이 축소됩니다.
갱신하다
jsFiddle: http://jsfiddle.net/K88H9/4/ 에서 데모를 확인하십시오.
제가 한 일은 당신이 그림자를 가지기를 원하는 실제 요소 뒤에 숨을 '그림자 요소'를 만드는 것이었습니다.저는 "그림자 요소"의 너비를 실제 요소보다 정확히 2배 적게 지정한 그림자의 폭으로 만든 다음 적절히 정렬했습니다.
HTML
<div id="wrapper">
<div id="element"></div>
<div id="shadow"></div>
</div>
CSS
#wrapper {
width: 84px;
position: relative;
}
#element {
background-color: #3D668F;
height: 54px;
width: 100%;
position: relative;
z-index: 10;
}
#shadow {
background-color: #3D668F;
height: 8px;
width: 80px;
margin-left: -40px;
position: absolute;
bottom: 0px;
left: 50%;
z-index: 5;
-webkit-box-shadow: 0px 2px 4px #000000;
-moz-box-shadow: 0px 2px 4px #000000;
box-shadow: 0px 2px 4px #000000;
}
원답
예, 제공한 것과 동일한 구문으로 이 작업을 수행할 수 있습니다.첫 번째 값은 수평 위치를 제어하고 두 번째 값은 수직 위치를 제어합니다. 첫 설정합니다.0px그리고 두번째는 다음과 같습니다.
-webkit-box-shadow: 0px 5px #000000;
-moz-box-shadow: 0px 5px #000000;
box-shadow: 0px 5px #000000;
상자 그림자에 대한 자세한 내용은 다음을 참조하십시오.
- http://www.css3.info/preview/box-shadow/
- https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
- http://www.w3.org/TR/css3-background/ #더박스-
스프레드(spread) 파라미터를 사용하여 그림자를 더 작게 만듭니다.
.shadow {
-webkit-box-shadow: 0 6px 4px -4px black;
-moz-box-shadow: 0 6px 4px -4px black;
box-shadow: 0 6px 4px -4px black;
}<div class="shadow">Some content</div>라이브 데모: http://dabblet.com/gist/a8f8ba527f5cff607327
측면에 그림자가 보이지 않으려면 확산 반경(4번째 파라미터)의 (절대값)이 블러 반경(3번째 파라미터)과 동일해야 합니다.
배경에 고정된 색상이 있는 경우 배경의 색상과 블러 = 0인 두 개의 마스킹 그림자로 측면 shadow 효과를 숨길 수 있습니다.
box-shadow:
-6px 0 white, /*Left masking shadow*/
6px 0 white, /*Right masking shadow*/
0 7px 4px -3px black; /*The real (slim) shadow*/
검은색 그림자는 맨 마지막에 있어야 하며, 모서리를 넘어 확대되는 것을 방지하기 위해 음의 퍼짐(-3px)이 있어야 합니다.
여기서 만지작거리다(마스크 그림자의 색상을 변경하여 실제로 작동하는 방식을 확인합니다.
div{
width: 100px;
height: 100px;
border: 1px solid pink;
box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}<div></div>
도 할 수 .clip-path표시할 모서리를 제외한 모든 오버플로 모서리를 잘라냅니다.
.shadow {
box-shadow: 0 4px 4px black;
clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}
클립 경로(MDN) 참조.의 주장은.polygon는 상단 왼쪽 점, 상단 오른쪽 점, 하단 오른쪽 점 및 하단 왼쪽 점입니다.하단 모서리를 다음으로 설정합니다.200% ( 큰 이든)100% 오버플로를 아래쪽 가장자리로만 제한합니다.
예:
.shadow {
box-shadow: 0 0 8px 5px rgba(200, 0, 0, 0.5);
}
.shadow-top {
clip-path: polygon(0% -20%, 100% -20%, 100% 100%, 0% 100%);
}
.shadow-right {
clip-path: polygon(0% 0%, 120% 0%, 120% 100%, 0% 100%);
}
.shadow-bottom {
clip-path: polygon(0% 0%, 100% 0%, 100% 120%, 0% 120%);
}
.shadow-left {
clip-path: polygon(-20% 0%, 100% 0%, 100% 100%, -20% 100%);
}
.shadow-bottom-right {
clip-path: polygon(0% 0%, 120% 0%, 120% 120%, 0% 120%);
}
/* layout for example */
.box {
display: inline-block;
vertical-align: top;
background: #338484;
color: #fff;
width: 4em;
height: 2em;
margin: 1em;
padding: 1em;
}<div class="box">none</div>
<div class="box shadow shadow-all">all</div>
<div class="box shadow shadow-top">top</div>
<div class="box shadow shadow-right">right</div>
<div class="box shadow shadow-bottom">bottom</div>
<div class="box shadow shadow-left">left</div>
<div class="box shadow shadow-bottom-right">bottom right</div>내 생각엔 이게 당신이 원하는 것 같은데요?
.shadow {
-webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
-moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
box-shadow: 0 0 0 4px white, 0 6px 4px black;
}<div class="shadow">wefwefwef</div>제가 사용할 @engineear의 답변을 바탕으로 한 또 다른 아이디어insetpolygon더 마진이나 패딩과 같은 방식으로 작동하기 때문에 더 쉽습니다.또한 CSS 변수에 의존하여 모든 다양한 경우를 쉽게 정의할 것입니다.
.shadow {
box-shadow: 0 0 8px 5px rgba(200, 0, 0, 0.5);
clip-path:inset(var(--t,0) var(--r,0) var(--b,0) var(--l,0))
}
.top { --t:-100%; }
.right { --r:-100%;}
.bottom { --b:-100%; }
.left { --l:-100%;}
/* layout for example */
.box {
display: inline-block;
vertical-align: top;
background: #338484;
color: #fff;
width: 4em;
height: 2em;
margin: 1em;
padding: 1em;
}<div class="box">none</div>
<div class="box shadow top right left bottom">all</div>
<div class="box shadow top">top</div>
<div class="box shadow right">right</div>
<div class="box shadow bottom">bottom</div>
<div class="box shadow left">left</div>
<div class="box shadow bottom right">bottom right</div>
<div class="box shadow bottom top">top bottom</div>
<div class="box shadow left top right">top left right</div>
<div class="box shadow left right"> left right</div>항상 스펙을 읽는 것이 좋습니다.거기에는 없다box-shadow-bottom그리고 Lea가 지적한 것처럼 접두사를 붙이지 않은 속성은 항상 접두사를 붙이지 않은 속성 다음에 아래에 놓아야 합니다.
그래서 말입니다.
.shadow {
-webkit-box-shadow: 0px 2px 4px #000000;
-moz-box-shadow: 0px 2px 4px #000000;
box-shadow: 0px 2px 4px #000000;
}<div class="shadow">Some content</div>오버플로우가 히든으로 설정되어 있고 하단에 패딩이 있는 디브를 사용하는 것은 어떨까요?이것이 가장 간단한 해결책인 것 같습니다.
제가 직접 생각한 게 아니라 다른 곳에서 본 거라 죄송합니다.
요소를 사용하여 상자 그림자와 오버플로를 얻는 요소를 감싸면 추가 상자 그림자가 사라지고 사용 가능한 테두리를 가질 수 있습니다.이를 통해 확산으로 인해 원소가 보이는 것처럼 작아지는 문제도 해결할 수 있습니다.
다음과 같은 경우:
#wrapper { padding-bottom: 10px; overflow: hidden; } #elem { box-shadow: 0 0 10px black; }컨텐츠가 여기에 표시됩니다.
순수 CSS로 해야 할 때 여전히 똑똑한 해결책!
요르겐 이븐스 말대로.
저도 그림자가 필요했는데 이미지 밑에만 있고 좌우로 살짝 세팅이 되어 있었어요.효과가 있었습니다.
.box-shadow {
-webkit-box-shadow: 5px 35px 30px -25px #888888;
-moz-box-shadow: 5px 35px 30px -25px #888888;
box-shadow: 5px 35px 30px -25px #888888;
}
여기에 적용되는 요소는 페이지 전체 이미지(980px x 300px)입니다.
설정을 조작할 때 도움이 되는 경우 다음과 같이 실행됩니다.
가로 그림자, 세로 그림자, 블러 거리, 퍼짐(즉, 그림자 크기) 및 색상.
그림자를 찾아보는 것이 좋습니다.
.header{
-webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}
이 코드는 현재 스택 오버플로 웹에서 사용되고 있습니다.
각 값이 무엇을 위한 것인지 알기 위해서는 주먹이 필요합니다.
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
요소의 한쪽에만 그림자 효과를 적용하려면 블러 값을 양수로 설정하고 퍼짐 값을 크기는 같으나 부호는 음수로 설정합니다.그림자를 원하는 쪽에 따라 다음과 같이 오프셋 값을 설정합니다.
- 위쪽 그림자:
offset-x:0 and offset-y: -5px - 오른쪽 그림자:
offset-x:5px and offset-y: 0 - 아래쪽 그림자:
offset-x:0 and offset-y: 5px - 왼쪽 그림자:
offset-x:-5px and offset-y: 0
.box{
margin: 2rem;
padding: 1rem;
}
.shadow-all{
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.shadow-top {
box-shadow: 0 -5px 3px -3px #00000030;
}
.shadow-right {
box-shadow: 5px 0 3px -3px #00000030;
}
.shadow-bottom {
box-shadow: 0 5px 3px -3px #00000030;
}
.shadow-left {
box-shadow: -5px 0 3px -3px #00000030;
}
<div class="box shadow-all">
Shadow All
</div>
<div class ="box shadow-top">
Shadow Top
</div>
<div class ="box shadow-right">
Shadow Right
</div>
<div class ="box shadow-bottom">
Shadow Bottom
</div>
<div class ="box shadow-left">
Shadow left
</div>여기서 더 자세히 보기
배경이 견고한 경우(또는 CSS를 사용하여 재생할 수 있는 경우) 선형 그라디언트를 다음과 같이 사용할 수 있습니다.
div {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}<div>
<p>Foobar</p>
<p>test</p>
</div>이렇게 하면 30% 불투명도에서 완전 투명도에 이르는 요소 하단에 5px 기울기가 발생합니다.나머지 원소는 흰색 바탕을 가지고 있습니다.물론, 직선 구배의 마지막 2가지 색상 정지를 변경하면 배경을 완전히 투명하게 만들 수 있습니다.
이 코드 펜(제가 만든 것이 아닙니다)은 이 작업을 수행하는 매우 간단한 방법과 그 반대 측면을 아주 멋지게 보여줍니다.
box-shadow: 0 5px 5px -5px #333;
https://codepen.io/zeckdude/pen/oxywmm
바닥에 그라데이션을 적용할 수도 있습니다. 원하는 그림자가 이미 반투명한 요소에 있기 때문에 클리핑에 대해 걱정할 필요가 없었기 때문에 도움이 되었습니다.
&:after {
content:"";
width:100%;
height: 8px;
position: absolute;
bottom: -8px;
left: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
}
"아래"와 "높이" 속성을 일치시키고 그림자의 맨 위/아래에 원하는 대로 rgba 값을 설정하면 됩니다.
이렇게 할 수 있습니다.
일반 구문:
selector {
box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}
예를 들어, 우리는 빨간색으로 아래 박스 그림자만 만들고자 합니다.
이를 위해서는 아래쪽 상자 섀도 옵션을 설정해야 하는 모든 사이드 옵션을 설정하고 다음과 같이 다른 모든 사이드 옵션을 빈 상태로 설정해야 합니다.
.box {
-moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
-o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
-webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}
상·하의 박스안에-
.cont{
position: relative;
border: 1px solid black;
margin: 0 auto;
width: 200px;
height: 200px;
overflow: hidden;
}
.shadow {
position: absolute;
width: 100%;
height:100%;
box-shadow: inset gray 0px 50px 15px 0px,inset gray 0px -50px 15px 0px;
padding-right: 30px;
margin-left: -15px;
}
<div class=cont>
<div class=shadow></div>
</div>다른 사람에게 업데이트하여 흰색 대신 투명한 면에 대답하여 다른 색 배경에서도 작동합니다.
body {
background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}
div {
background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
background-size: contain;
width: 100px;
height: 100px;
margin: 50px;
border: 5px solid white;
box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}<div>
</div>안쪽의 그림자
.shadow {
-webkit-box-shadow: inset 0 0 9px #000;
-moz-box-shadow: inset 0 0 9px #000;
box-shadow: inset 0 0 9px #000;
}<div class="shadow">wefwefwef</div>언급URL : https://stackoverflow.com/questions/5460129/how-to-create-a-drop-shadow-only-on-one-side-of-an-element
'sourcetip' 카테고리의 다른 글
| mysql 데이터베이스에 배열 저장 (0) | 2023.10.15 |
|---|---|
| jQuery의 요소 또는 클래스 LIKE 선택기? (0) | 2023.10.15 |
| 두 개의 사용자 지정 게시물 유형 동일한 범주 (0) | 2023.10.15 |
| 부분 문자열 색인 가져오기 (0) | 2023.10.15 |
| 스파크 상태의 데이터 프레임 열 업데이트 (0) | 2023.10.15 |