CSS3 box-shadow : 인세 트는 한쪽 또는 양면 만 할 수 있습니까? 경계선처럼?
css3의 특정 내부 그림자에 대한 지원에 대해 궁금합니다.
나는 지원되는 브라우저에서 잘한다는 것을 알고 있습니다.
div { box-shadow:inset 0px 1px 5px black; }
나는 다음과 같은 것을 달성하는 방법이 궁금합니다.
div { box-shadow-top:inset 0px 1px 5px black; }
이것은 나를 위해 일한 것입니다.
box-shadow: inset 1px 4px 9px -6px;
예 : http://jsfiddle.net/23Egu/
0으로 box-shadow-top설정 offsetx하고 offsety양수 값으로 설정하면 남은 그림자 만 맨 맨 위에 있기 때문에 정말 필요하다고 생각 합니다.
상단에는 그림자를, 하단에는 그림자를 적용하는 두 개의 div를 사용하면됩니다.
<div style="box-shadow:inset 0 1px 5px black;">
<div style="box-shadow:inset 0 -1px 5px black;">
some content
</div>
</div>
간단한 그림자를 없애고 페이지 색상 rgba대신 사용 hex하고 더 크게 설정하십시오 offsety.
box-shadow:inset 0 5px 5px rgba(0,0,0,.5)
이렇게하면 그림자가 더 불투명 해지다는 것이 숨겨지고있는 것이 많을수록 불투명도가 처리됩니다.
전체 예 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
background: #1C1C1C;
}
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: #fff;
-webkit-border-radius: 20px;
-khtml-border-radiust: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
box-shadow:inset 0px 5px 5px rgba(0,0,0,.5);
}
div > div {
background:none;
box-shadow:inset 0px -5px 5px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div><div></div></div>
</body>
</html>
다음 예제와 같이 상위 상자에서 일반 그림자가 잘린 요소 :before및 after요소 사용 overflow:hidden: http://dabblet.com/gist/2585782
CSS
/**
* Top and Bottom inset shadow
*/
#element{
background-color: #E3F2F7;
height: 55px;
position: relative; /* to position pseudo absolute*/
overflow: hidden; /* to cut of overflow shadow*/
margin-top: 200px;
}
#element:before , #element:after{
content: "\0020";
display: block;
position: absolute;
width: 100%;
height: 1px; /* when 0 no shadow is displayed*/
box-shadow: #696c5c 0 0 8px 0;
}
#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px} /* because of height: 1*/
HTML
<div id="element"></div>
대부분의 경우 해결을 위해 배경을 사용할 수 있습니다.
SCSS (나침반 포함) 예 :
@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );
box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
이 단지 사랑스럽게 작동합니다 :)
다음은 코드 펜입니다. http://codepen.io/poopsplat/pen/cGBLy
하지만 그림자이지만 상단에만 :
box-shadow: inset 0px 6px 5px -5px black;
한 방향으로 그림자를 가지려면 "spread"매개 변수로 "blur"매개 변수를 무효화 한 다음 동일한 값으로 "h-pos"및 / 또는 "v-pos"매개 변수를 조정해야합니다. 반대쪽 작동 나 삼중 작동하지 않습니다. 정의를 하나 더 추가해야합니다.
여기에 더 많은 예 : http://codepen.io/GBMan/pen/rVXgqP
아니요, 직접적으로는 아니지만 다음을 사용하여 div에 넣어 원하지 않는 부분을자를 수 있습니다 overflow: hidden.
나도이 문제가 있었다. 내가 찾은 해결책은 여러 개의 상자 그림자 (당신이 원하는 그림자를 원하는 각면에 하나씩)였습니다. 정의는 다음과 같습니다.
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
생각하는 방법은 다음과 같습니다.
- 먼저 스프레드를 0으로 만듭니다 (이렇게하면 모든면에서 효과가 비활성화됩니다).
- h 오프셋 (양수로 설정하면 왼쪽에, 음수로 설정하면 오른쪽에 캐스트됩니다)
- v-offset (양수로 설정하면 위쪽에 캐스트되고 음수로 설정하면 아래쪽에
여기에서 3면에 박스 섀도우가있는 케이스를 볼 수 있습니다 (왼쪽, 위쪽, 오른쪽 및 아래쪽은 내가 원하는 효과를 만들기 위해 배경과 동일한 색상입니다. 왼쪽과 오른쪽이 아래쪽으로 끝까지 이동 함) ) https://codepen.io/cponofrei/pen/eMMyQX
div를 설정 overflow:hidden하고 테두리를 따라 그림자 요소를 추가하여 단면 내부 그림자를 만들 수 있습니다.
분할의 위쪽 및 아래쪽 테두리에 내부 그림자를 설정합니다.
HTML
<div id="innerShadow">
<div id="innerShadowTop">
Content...
<div id="innerShadowBottom">
</div>
CSS
#innerShadow
{
position: relative;
overflow: hidden;
}
#innerShadowTop
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
top: -1px;
-moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}
#bannerShadowBottom
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
-moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}
box-shadow사방 모두를위한 것입니다. 당신은 그것을 바꿀 수 없습니다 (아직?). 의 4 개 크기 box-shadow의 정의는 OffsetX, offsetY, Blur와 Spread.
여러 상자 그림자가 나에게 트릭을 제공했습니다.
box-shadow:
inset 0 -8px 4px 4px rgb(255,255,255),
inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);
'ProgramingTip' 카테고리의 다른 글
| gitlab 개인 저장소에서 npm 모듈 설치 (0) | 2020.10.18 |
|---|---|
| UIViewController의 뷰를 서브 뷰로 추가하는 방법 (0) | 2020.10.18 |
| 두 개의 PHP Doctrine 2 ArrayCollection ()을 병합하는 방법 (0) | 2020.10.18 |
| Windows에서 Npm을 때 때 SSL 인증서 오류를 수정하는 방법은 무엇입니까? (0) | 2020.10.18 |
| Skype 프로필에 대한 응용 프로그램 링크 만들기 (0) | 2020.10.18 |