CSS 상자 그림자-상단 및 하단 만
중복 가능성 :
그림자 만 하단 css3
이 작업을 수행하는 방법에 대한 예를 찾을 수 없지만 요소의 위쪽과 아래쪽에만 상자 그림자를 추가하려면 어떻게해야합니까?
Kristian이 지적했듯이 z- 값을 잘 제어하면 문제가 해결되는 경우가 많습니다.
그래도 작동하지 않으면 과도한 그림자를 숨기기 위해 오버플로 숨김을 사용하여 CSS Box Shadow Bottom Only 를 살펴볼 수 있습니다 .
또한 box-shadow 속성은 다음과 같이 쉼표로 구분 된 그림자 목록을 허용 할 수 있음을 염두에 두어야합니다.
box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;
이렇게하면 각 방향에서 그림자의 "양"을 제어 할 수 있습니다.
한 번 봐 가지고 http://www.css3.info/preview/box-shadow/ 상자 그림자에 대한 자세한 내용입니다.
이것이 당신이 찾고 있던 것이기를 바랍니다!
몇 번의 실험 끝에 선의 네 번째 값이 스프레드를 제어한다는 것을 발견했습니다 (적어도 FF 10에서는). 나는 수직 오프셋에 반대하고 부정적인 스프레드를주었습니다.
작동하는 펜은 다음과 같습니다. http://codepen.io/gillytech/pen/dlbsx
<html>
<head>
<style type="text/css">
#test {
width: 500px;
border: 1px #CCC solid;
height: 200px;
box-shadow:
inset 0px 11px 8px -10px #CCC,
inset 0px -11px 8px -10px #CCC;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
이것은 나를 위해 완벽하게 작동합니다!
그래서 이것은 내 첫 번째 대답입니다. 그리고 비슷한 것을 필요로했기 때문에 2 개의 내부 그림자에 대해 의사 요소를 사용하고 위쪽 외부 그림자에 대해 추가 DIV를 사용했습니다. 이것이 최선의 해결책인지는 모르지만 누군가에게 도움이 될 것입니다.
HTML
<div class="shadow-block">
<div class="shadow"></div>
<div class="overlay">
<div class="overlay-inner">
content here
</div>
</div>
</div>
CSS
.overlay {
background: #f7f7f4;
height: 185px;
overflow: hidden;
position: relative;
width: 100%;
}
.overlay:before {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 50px 2px rgba(1, 1, 1, 0.6);
content: " ";
display: block;
margin: 0 auto;
width: 80%;
}
.overlay:after {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 70px 5px rgba(1, 1, 1, 0.5);
content: "-";
display: block;
margin: 0 auto;
position: absolute;
bottom: -65px;
left: -50%;
right: -50%;
width: 80%;
}
.shadow {
position: relative;
width:100%;
height:8px;
margin: 0 0 -22px 0;
-webkit-box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
box-shadow: 0px 0px 50px 3px rgba(1, 1, 1, 0.6);
border-radius: 50%;
}
나는 그것을 가지고 놀았고 해결책이 있다고 생각합니다. 다음 예제는 요소의 삽입 된 상단 및 하단에만 그림자를 표시하도록 Box-Shadow를 설정하는 방법을 보여줍니다.
범례 : insetOption leftPosition topPosition blur 강도 스프레드 강도 색상
Description
The key to accomplishing this is to set the blur value to <= the negative of the spread value (ex. inset 0px 5px -?px 5px #000; the blur value should be -5 and lower) and to also keep the blur value > 0 when subtracted from the primary positioning value (ex. using the example from above, the blur value should be -9 and up, thus giving us an optimal value for the the blur to be between -5 and -9).
Solution
.styleName {
/* for IE 8 and lower */
background-color:#888; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#FFFFCC, offX=0, offY=0, positive=true);
/* for IE 9 */
box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
/* for webkit browsers */
-webkit-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
/* for firefox 3.6+ */
-moz-box-shadow: inset 0px 2px -2px 2px rgba(255,255,204,0.7), inset 0px -2px -2px 2px rgba(255,255,204,0.7);
}
essentially the shadow is the box shape just offset behind the actual box. in order to hide portions of the shadow, you need to create additional divs and set their z-index above the shadowed box so that the shadow is not visible.
If you'd like to have extremely specific control over your shadows, build them as images and created container divs with the right amount of padding and margins.. then use the png fix to make sure the shadows render properly in all browsers
참고URL : https://stackoverflow.com/questions/6671375/css-box-shadow-top-and-bottom-only
'Programing' 카테고리의 다른 글
| XML에서 문자열로 org.w3c.dom.Document를로드하려면 어떻게해야합니까? (0) | 2020.08.14 |
|---|---|
| Active Directory에서 사용자 그룹을 가져 오는 방법은 무엇입니까? (0) | 2020.08.14 |
| 존재하지 않는 경우 mysql 테이블에 열 추가 (0) | 2020.08.14 |
| 다른 모든 것이로드 될 때까지 jquery 스크립트 지연 (0) | 2020.08.14 |
| iPhone / iOS JSON 구문 분석 자습서 (0) | 2020.08.14 |