CSS3 box-shadow 속성

인스턴스

div 요소에 box-shadow 추가하기

div
{
box-shadow: 10px 10px 5px #888888;
}

정의 및 사용

box-shadow 속성은 상자에 그림자를 하나 이상 추가합니다.
알림:border-image-* 속성을 사용하여 예쁜 신축 버튼을 구성하세요!
기본값:none
상속성: no
버전: CSS 3
JavaScript 구문:object.style.boxShadow="10px 10px 5px #888888"

구문

box-shadow:
h-shadow
v-shadow
blur
spread
color
inset;
box-shadow: h-shadow v-shadow blur spread color inset;
주석:box-shadow는 상자에 음영을 하나 이상 추가합니다.이 속성은 쉼표로 구분된 음영 목록입니다. 각 음영은 2-4개의 길이 값, 선택할 수 있는 색 값, 선택할 수 있는 inset 키워드로 지정됩니다.생략된 길이의 값은 0입니다.
값
묘사
테스트
h-shadow
필요합니다.수평 그림자의 위치.음수 값을 허용합니다.
테스트
v-shadow
필요합니다.수직 음영의 위치.음수 값을 허용합니다.
테스트
blur
선택할 수 있습니다.모호한 거리.
테스트
spread
선택할 수 있습니다.섀도우의 치수입니다.
테스트
color
선택할 수 있습니다.음영의 색.CSS 색상 값을 참조하십시오.
테스트
inset
선택할 수 있습니다.외부 섀도우(outset)를 내부 섀도우로 변경합니다.
테스트
box-shadow:
h-shadow
v-shadow
blur
spread
color
inset;