HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS 튜토리얼

CSS 홈 CSS 소개 CSS 구문 CSS 선택기 CSS 방법 CSS 주석 CSS 색상
Colors RGB HEX HSL
CSS 배경
Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSS 테두리
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
CSS 여백
Margins Margin Collapse
CSS 패딩 CSS 높이/너비 CSS 상자 모델 CSS 개요
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS 텍스트
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS 글꼴
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS 아이콘 CSS 링크 CSS 목록 CSS 테이블
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS 디스플레이 CSS 최대 너비 CSS 위치 CSS Z-색인 CSS 오버플로 CSS 플로트
Float Clear Float Examples
CSS 인라인 블록 CSS 정렬 CSS 결합기 CSS 의사 클래스 CSS 의사 요소 CSS 불투명도 CSS 탐색 모음
Navbar Vertical Navbar Horizontal Navbar
CSS 드롭다운 CSS 이미지 갤러리 CSS 이미지 스프라이트 CSS 속성 선택기 CSS 양식 CSS 카운터 CSS 웹사이트 레이아웃 CSS 단위 CSS 특수성 CSS !중요 CSS 수학 함수

CSS 고급

CSS 둥근 모서리 CSS 테두리 이미지 CSS 배경 CSS 색상 CSS 색상 키워드 CSS 그라디언트
Linear Gradients Radial Gradients Conic Gradients
CSS 그림자
그림자 효과 박스 섀도우
CSS 텍스트 효과 CSS 웹 글꼴 CSS 2D 변환 CSS 3D 변환 CSS 전환 CSS 애니메이션 CSS 도구 설명 CSS 스타일 이미지 CSS 이미지 반사 CSS 객체 맞춤 CSS 객체 위치 CSS 마스킹 CSS 버튼 CSS 페이지 매김 CSS 다중 열 CSS 사용자 인터페이스 CSS 변수
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSS 상자 크기 조정 CSS 미디어 쿼리 CSS MQ 예 CSS 플렉스박스
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS 반응형

RWD 소개 RWD 뷰포트 RWD 그리드 보기 RWD 미디어 쿼리 RWD 이미지 RWD 비디오 RWD 프레임워크 RWD 템플릿

CSS 그리드

그리드 소개 그리드 컨테이너 그리드 항목

CSS SASS

SASS 튜토리얼

CSS 예제

CSS 템플릿 CSS 예제 CSS 퀴즈 CSS 연습 CSS 인증서

CSS 참조

CSS 참조 CSS 선택기 CSS 함수 CSS 참조 청각 CSS 웹 안전 글꼴 CSS 애니메이션 가능 CSS 단위 CSS PX-EM 변환기 CSS 색상 CSS 색상 값 CSS 기본값 CSS 브라우저 지원

CSS 상자 그림자

❮ 이전의 다음 ❯

CSS box-shadow 속성

CSS box-shadow속성은 요소에 하나 이상의 그림자를 적용하는 데 사용됩니다.

수평 및 수직 그림자 지정

가장 간단한 사용에서는 수평 및 수직 그림자만 지정합니다. 그림자의 기본 색상은 현재 텍스트 색상입니다.

상자 그림자가 있는 <div> 요소

예시

수평 및 수직 그림자 지정:

div {
  box-shadow: 10px 10px;
}

그림자의 색상 지정

color매개변수는 그림자의 색상을 정의합니다 .

회색 상자 그림자가 있는 <div> 요소

예시

그림자 색상 지정:

div {
  box-shadow: 10px 10px grey;
}

그림자에 흐림 효과 추가

매개변수 는 blur흐림 반경을 정의합니다. 숫자가 높을수록 그림자가 더 흐려집니다.

5px 흐릿한 회색 상자 그림자가 있는 <div> 요소

예시

그림자에 흐림 효과 추가:

div {
  box-shadow: 10px 10px 5px grey;
}

그림자의 확산 반경 설정

매개변수 는 spread확산 반경을 정의합니다. 양수 값은 그림자의 크기를 늘리고 음수 값은 그림자의 크기를 줄입니다.

확산 반경이 12px인 흐린 회색 상자 그림자가 있는 <div> 요소

예시

그림자의 확산 반경 설정:

div {
  box-shadow: 10px 10px 5px 12px grey;
}

삽입 매개변수 설정

매개변수 는 inset그림자를 외부 그림자(외부)에서 내부 그림자로 변경합니다.

흐릿한 회색 삽입 상자 그림자가 있는 <div> 요소

예시

삽입 매개변수를 추가합니다.

div {
  box-shadow: 10px 10px 5px grey inset;
}

여러 그림자 추가

요소에는 여러 그림자가 있을 수도 있습니다.

예시

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

카드

box-shadow속성을 사용하여 종이와 같은 카드를 만들 수도 있습니다 .

1

2021년 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;
}

연습으로 자신을 테스트하십시오

연습:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ Previous Next ❯