반응형
CSS Box Shadow Bottom 만 해당
이 질문에는 이미 답변이 있습니다.
- 그림자 만 아래쪽 CSS3 답변 14 개
어떻게해야합니까? 요소에 그림자 밑줄이있는 것처럼 보이도록하고 싶습니다. 나는 다른 3면의 그림자를 원하지 않습니다.
이 작업을 수행:
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
반응형
'Programming' 카테고리의 다른 글
| NOT NIL을 사용하는 상태의 레일 (0) | 2020.02.29 |
|---|---|
| ETag와 헤더 만료 (0) | 2020.02.29 |
| Eclipse 프로젝트에서 자바 스크립트 유효성 검사를 어떻게 제거합니까? (0) | 2020.02.29 |
| EC2 인스턴스에서 인스턴스 ID를 얻는 방법은 무엇입니까? (0) | 2020.02.29 |
| 안드로이드 : 키보드 입력 버튼이 "검색"이라고 말하고 클릭을 처리하는 방법은 무엇입니까? (0) | 2020.02.29 |