삽입 CSS 상자 그림자 — 기성 코드
CSS 상자 그림자 코드를 시각적으로 구축합니다. 오프셋, 흐림, 확산, 불투명도가 있는 색상, 삽입 모드 및 실시간 미리 보기가 포함된 최대 4개의 레이어에 대한 슬라이더입니다.
처리 중...
0%
결과
이 페이지에서는 삽입 확인란이 이미 선택되어 있는 상자 그림자 생성기가 열리므로 그림자가 요소 뒤가 아닌 요소 내부에 그려집니다. 미리보기 카드에는 가라앉은 효과가 한 번에 표시되며, 모든 슬라이더는 CSS 라인을 실시간으로 계속 업데이트합니다.
삽입 그림자는 CSS가 깊이를 안쪽으로 가짜로 만드는 방법입니다. 누른 버튼 상태, 검색 필드 및 입력 영역, 진행률 표시줄 최저점 및 새겨진 패널이 모두 여기에 의존합니다. 그림자가 내부 가장자리를 감싸기 때문에 흐림 및 확산은 일반 그림자와 약간 다르게 작동합니다. 여기 슬라이더를 사용하면 그 차이를 즉시 느낄 수 있습니다.
움푹 들어간 모양이 올바르면 상자 그림자 선을 스타일시트에 복사하세요. 삽입 레이어를 일반 외부 레이어와 결합할 수도 있습니다. 두 번째 레이어를 추가하고 삽입을 선택 해제하여 두 레이어를 하나의 선언에 혼합할 수도 있습니다.