이 블로그에서는 HTML 요소에 그림자 효과를 적용하는 방법에 대해 설명합니다.
CSS를 사용하여 HTML 요소에 그림자 효과를 떨어뜨리는 방법은 무엇입니까?
“ 상자 그림자 ” 속성은 두 개 이상의 추가된 효과 값이 쉼표로 구분될 수 있는 요소 주위에 그림자를 추가합니다.
box-shadow 속성의 구문은 아래에 설명되어 있습니다.
통사론
상자 그림자 : 없음 |h-오프셋 v-오프셋 블러 확산 색상 | 삽입 | 초기의 | 당신은 상속 ;
위에서 언급한 구문에 대한 설명은 다음과 같습니다.
- “ 없음 ” : box-shadow 속성의 기본값이다.
- “ h-오프셋 ”: 이 값은 수평 거리를 나타냅니다.
- “ v 오프셋 ”: 이 값은 수직 거리를 정의합니다.
- “ 흐림 ”: 세 번째 값은 흐림입니다. 값을 최대화하면 흐림 효과가 최대화됩니다.
- “ 확산 ”: 네 번째 값은 그림자 퍼짐을 나타냅니다. 양수 값은 스프레드를 증가시키고 음수 값은 스프레드를 감소시키는 양수 또는 음수 값을 보유할 수 있습니다.
- “ 색상 ”: 이 값은 선택 사항이며 현재 색상을 나타냅니다.
- “ 초기의 ”: 이 값은 초기 값의 속성을 설정합니다.
- “ 당신은 상속 ”: 이 값은 상위 요소의 속성을 상속합니다.
- “ 삽입 ”: 삽입 값은 상자 내부에 그림자를 만드는 데 사용됩니다.
실제 예제를 통해 그림자 효과가 어떻게 보이는지 봅시다.
예시
HTML 파일에서 먼저 ' <사업부> '. 이
및
태그를 추가하여 웹 페이지에 콘텐츠를 제공합니다.
HTML
< 사업부 >< h1 > 박스 섀도우 < / h1 >
< 피 > 상자 그림자: 3px 8px < / 피 >
< / 사업부 >
이제 추가된 HTML 요소에 CSS 속성을 적용합니다.
CSS
사업부 {상자 그림자 : 3px 8px ;
}
div 요소는 “ 상자 그림자 ” 값으로 “ 3픽셀 8픽셀 ”는 가로 오프셋과 세로 오프셋을 나타냅니다.
산출
다음 섹션에서 HTML 요소는 다른 속성으로 스타일이 지정됩니다.
CSS
사업부 {국경 : 5px 단단한 RGB ( 255 , 111 , 1 ) ;
상자 그림자 : 3px 8px 9px 4px #f4af1b ;
}
다음은 div 요소에 적용되는 추가 CSS 속성입니다.
- “ 국경 ” 속성에는 5px solid rgb(255, 111,1) 값이 할당됩니다. 여기서 5px는 테두리의 너비를 나타내고 solid는 테두리의 스타일을 나타내고 rgb(255, 111, 1)은 색상을 나타냅니다.
- “ 상자 그림자 ” 속성 값이 3px 8px 9px 4px #f4af1b이면 h-offset은 3px, v-offset은 8px, blur는 9px, spread는 4px로 나타내고 #f4af1b는 색상을 지정합니다.
위에 주어진 코드는 아래와 같이 div 요소를 표시합니다.
이제 다음 섹션에서 두 개의 div 요소를 나타내는 두 개의 상자를 만듭니다. 각각 다른 여러 상자 그림자 값을 부여하고 결과를 관찰합니다.
HTML
<사업부 ID = '박스1' ><피 > 상자 그림자 : 3px 8px 9px 4px #f4af1b >
>
<사업부 ID = '박스2' >
<피 > 상자 그림자 : 3px 8px 9px 4px #f4af1b >
>
스타일 상자1 div
#박스1 {너비 : 40% ;
키 : 140픽셀 ;
국경 : 5px 단단한 #ff9c83 ;
상자 그림자 : 8px 10px 15픽셀 20픽셀 #807f7f ;
}
여기:
- “ #박스1 ”는 id가 box1인 div에 액세스하는 데 사용됩니다.
- “ 너비 ” 속성은 요소의 너비 설정에 활용됩니다.
- “ 키 ” 속성은 요소의 높이를 설정합니다.
- “ 국경 ”에는 5px solid #ff9c83 값이 주어집니다. 여기서 5px는 테두리의 너비를 나타내고 solid는 테두리의 스타일을 나타내며 #ff9c83은 색상을 나타냅니다.
- “ 상자 그림자 ” 속성은 “로 설정됩니다. 8픽셀 10픽셀 15픽셀 20픽셀 #807f7f ” 여기서 8px는 수평 오프셋, 10px는 수직 오프셋, 15px는 흐림 효과, 20px는 확산 효과, #807f7f는 그림자의 색상입니다.
스타일 box2 div
#박스2 {너비 : 40% ;
키 : 140픽셀 ;
국경 : 5px 단단한 RGB ( 255 , 111 , 1 ) ;
상자 그림자 : 삽입 4px 8px #f4af1b ;
여백 왼쪽 : 350픽셀 ;
}
동일한 속성으로 box2 div의 스타일을 지정했음을 알 수 있습니다.
보너스 팁: HTML 요소에 여러 그림자 추가
“ 상자 그림자 ” 속성을 활용하여 HTML 요소에 여러 그림자 효과를 추가할 수 있습니다. 이것은 아래 예와 같이 모든 그림자 사이에 쉼표를 사용하여 수행할 수 있습니다.
상자 그림자 : 6px 6px RGB ( 91 , 0 , 143 ) , 12px 5px RGB ( 201 , 8 , 8 ) , 16px 16px 8px RGB ( 226 , 213 , 29 ) ;보시다시피 여러 그림자가 성공적으로 적용되었습니다.
CSS 테두리 그림자 사용에 관한 모든 것이었습니다.
결론
“ 상자 그림자 ” CSS의 속성은 HTML 요소에 그림자 효과를 적용하는 데 사용됩니다. 이 속성은 주로 수평 오프셋과 수직 오프셋에 대한 두 가지 값으로 구성되지만 흐림 효과, 확산 반경 효과, 색상 등과 같은 여러 값이 있을 수 있습니다. 또한 각 box-shadow 속성 사이에 쉼표를 사용하여 요소에 여러 그림자를 추가할 수도 있습니다. 이 기사에서는 CSS box-shadow 속성을 실용적인 예제와 함께 설명했습니다.