상자 그림자
CSS3를 사용하면 그림자 효과를 만들 수 있습니다!
CSS3 그림자 효과
CSS3를 사용하면 텍스트 및 요소에 그림자를 추가 할 수 있습니다.
이 장에서는 다음과 같은 속성에 대해 배우게됩니다 :
-
text-shadow -
box-shadow
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 다음 -webkit- 또는 -moz- 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS3 텍스트 그림자
CSS3 text-shadow 속성은 텍스트에 그림자를 적용합니다.
간단한 사용, 당신은 수평 그림자 (2 픽셀), 수직 그림자 (2 픽셀)를 지정합니다 :
텍스트 그림자 효과!
다음으로, 그림자에 색상을 추가 :
텍스트 그림자 효과!
그 후, 그림자에 흐림 효과를 추가 :
텍스트 그림자 효과!
다음의 예는 검은 그림자와 흰색 텍스트를 보여줍니다
텍스트 그림자 효과!
다음은 붉은 네온 빛 그림자를 보여줍니다
텍스트 그림자 효과!
다중 그림자
텍스트에 하나 이상의 그림자를 추가하려면 그림자의 쉼표로 구분 된 목록을 추가 할 수 있습니다.
다음은 빨간색과 파란색 네온 빛 그림자를 보여줍니다
텍스트 그림자 효과!
다음의 예는, 블랙, 블루, 및 darkblue 그림자와 흰색 텍스트를 보여줍니다
텍스트 그림자 효과!
CSS3 box-shadow 속성
CSS3의 box-shadow 속성은 요소에 그림자를 적용합니다.
간단한 사용, 당신은 수평 그림자 및 수직 그림자를 지정합니다
다음으로, 그림자에 색상을 추가 :
다음으로, 그림자에 흐림 효과를 추가 :
당신은 또한에 그림자를 추가 할 수 있습니다 : 가상 클래스 후, 흥미로운 효과를 만들 :: 전 :
예
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} »그것을 자신을 시도 카드
사용한 예 box-shadow 종이 형 카드를 작성하는 속성 :
1
2016년 1월 1일
하르, 노르웨이
예
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
그것은 (텍스트 카드)를보십시오» 그것은 (이미지 카드)를보십시오» 연습으로 자신을 테스트!
CSS3 그림자 등록
다음 표는 CSS3 그림자 속성을 보여줍니다 :
| 재산 | 기술 |
|---|---|
| box-shadow | 요소에 하나 이상의 추가의 그림자 |
| text-shadow | 텍스트에 하나 이상의 그림자를 추가합니다 |