전체 DIV 주위에 CSS 상자 그림자 추가

전체 DIV 주위에 CSS 상자 그림자 추가

---

그림자가 전체 DIV를 둘러싸는 것이 가능합니까?

-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;

속성 순서는 다음과 같습니다.

• 수평 오프셋
• 수직 오프셋
• 흐림 반경
• 색깔

하지만 그림자가 한쪽 가장자리 나 옆면에만 나타나는 것이 아니라 그 주위로 모두 돌아가도록하는 것이 가능한지 궁금합니다.

---

그림자를 오프셋하고 있으므로 상자를 균일하게 둘러싸도록하려면 오프셋하지 마십시오.

-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;

---

예, 수직 또는 수평 오프셋, 그리고 비교적 큰 흐림 반경을 사용하지 않는 : 바이올린

또한 쉼표로 구분하면 여러 개의 상자 그림자를 사용할 수 있습니다. 이렇게하면 흐릿한 부분과 확장되는 정도를 미세 조정할 수 있습니다. 내가 제공하는 예제는 큰 .NET과 구별 outline할 수 없지만 훨씬 더 세부적으로 조정할 수 있습니다. fiddle

당신의 마지막과 가장 관련성이 재산 놓친 box-shadow입니다 spread-distance. 그림자가 확장되거나 축소되는 정도에 대한 값을 지정할 수 있습니다 (두 번째 예제를 쓸모 없게 만듭니다). fiddle

전체 속성 목록은 다음과 같습니다.

상자 그림자 : [수평 오프셋] [수직 오프셋] [흐림 반경] [확산 거리] [색상] 삽입?

하지만 더 좋은 점은 spec을 읽어보십시오 .

---

아래 코드를 사용하십시오. 전체 DIV를 둘러싸는 그림자가됩니다.

-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); -moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75); box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);

이것이 효과가 있기를 바랍니다.

---

아래 코드를 사용하십시오.

 border:2px soild #eee;

 margin: 15px 15px;
 -webkit-box-shadow: 2px 3px 8px #eee;
-moz-box-shadow: 2px 3px 8px #eee;
box-shadow: 2px 3px 8px #eee;

설명:-

box-shadow를 사용하려면 수평 및 수직 오프셋을 설정해야합니다. 그런 다음 선택적으로 흐림 및 색상을 설정할 수 있으며, 기본 시작 대신 그림자 삽입을 선택할 수도 있습니다. 색상은 hex 또는 rgba 로 정의 할 수 있습니다 .

box-shadow : 삽입 / 초기 h- 오프셋 v- 오프셋 블러 확산 색상;

값 설명 ...

inset / outset- 그림자가 상자 내부 또는 외부에 있는지 여부. 지정하지 않으면 기본값으로 시작됩니다.

h-offset- 그림자의 수평 오프셋 (필수 값)

v-offset- 그림자의 수직 오프셋 (필수 값)

흐림 -말했듯이 그림자의 흐림

확산 -그림자를 상자에서 모든면에서 똑같이 멀리 이동합니다. 양수 값은 그림자를 확장하고 음수 값은 축소합니다. 이 값은 자주 사용되지는 않지만 여러 그림자에 유용합니다.

색상 -말했듯이 그림자의 색상

용법

box-shadow : 2px 3px 8px #eee; 수평 아웃 셋이 2px, 수직이 3px, 블러가 8px 인 회색 그림자

---

CSS 코드는 다음과 같습니다.

box-shadow: 0 0 10px 5px white;

그것은 모양에 관계없이 전체 DIV를 그늘지게 할 것입니다!

---

.allSides
{
width:350px;height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

실제 효과를 보려면 마우스 오버시 이것을 사용하면 div에 테두리 및 그림자가 제공됩니다.

참고 URL : https://stackoverflow.com/questions/6821295/add-css-box-shadow-around-the-whole-div