CSS 그림자를 만드는 방법

CSS에서는 box-shadow 속성을 사용하여 그림자를 설정할 수 있습니다. 구문은 "box-shadow: X축 Y축 크기 색상 삽입"입니다. 추가 시 그림자는 선택 사항입니다. 추가되지 않은 경우 그림자는 외부 그림자를 나타냅니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

box-shadow는 CSS 그림자 설정으로 외부 그림자와 내부 그림자로 구분됩니다. 일반적으로 기본값은 외부 그림자입니다.

1. 외부 그림자의 속성은 다음과 같습니다. Shadow의 X축 Y축 px 색상 삽입
   속성 설명(해당 순서): 그림자의 X축(음수 값 사용 가능) 그림자의 Y축(음수 값 사용 가능) 그림자 흐림 값(크기) 그림자 삽입 색상

<style>
 .one{
  margin: auto;
  width: 200px;
  height: 200px;
  border: 1px solid #ffa;
  box-shadow: 0 0 20px #000;
 }
</style>

<p> 
</p>

결과는 다음과 같습니다.

css3 애니메이션 효과와 결합하면 더욱 놀랍습니다.
2. 추천 학습: css 비디오 튜토리얼
   

위 내용은 CSS 그림자를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!