반응형
CSS 상자 섀도 맨 아래만
어떻게 해야 하나요?나는 내 요소가 그림자 밑줄이 있는 것처럼 보이기를 원합니다.저는 다른 세 면에 그림자를 드리우는 것을 원하지 않습니다.
수행할 작업:
box-shadow: 0 4px 2px -2px gray;
블러를 (3번째 값)으로 설정하고 스프레드(4번째 값)를 음의 값으로 설정하는 것이 실제로 훨씬 더 간단합니다.
두 가지 요소를 사용할 수 있습니다. 하나는 다른 요소 안에 있고 하나는 외부 요소입니다.overflow: hidden그리고 바닥 패딩과 함께 내부 요소와 동일한 폭으로 다른 모든 측면의 그림자가 "잘려지도록" 합니다.
#outer {
width: 100px;
overflow: hidden;
padding-bottom: 10px;
}
#outer > div {
width: 100px;
height: 100px;
background: orange;
-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
또는 외부 요소를 플로팅하여 내부 요소의 크기로 축소합니다.참조: http://jsfiddle.net/QJPd5/1/
사용해 보세요.
-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
http://jsfiddle.net/wJ7qp/ 에서 확인할 수 있습니다.
상자 채우기를 완전히 제어하려면 이 방법을 사용하십시오.
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
이것은 외부 상자 포장에도 적용됩니다.
언급URL : https://stackoverflow.com/questions/4561097/css-box-shadow-bottom-only
반응형
'programing' 카테고리의 다른 글
| ES6로 작성된 모듈을 NPM에 게시하려면 어떻게 해야 합니까? (0) | 2023.08.01 |
|---|---|
| xampp에서 컬을 활성화하는 방법은 무엇입니까? (0) | 2023.08.01 |
| Swift. Objective-c 모듈 'Alamofire'를 빌드할 수 없습니다. (0) | 2023.08.01 |
| CSS의 인라인 SVG (0) | 2023.08.01 |
| 엔티티 유형 MVC5 EF6의 사용자 (0) | 2023.08.01 |