CSS3에서 유연한 상자를 만드는 방법

CSS3에서 가변 상자를 작성해야 하는 경우가 있는데, 이 코드를 어떻게 작성해야 할까요? 이를 위해서는 상자가 표시될 때 상자에 그림자 효과를 생성할 수 있는 box-shadow 속성을 사용해야 합니다. 자세한 설명은 아래에서 설명하겠습니다

쓰기:

           box-shadow: length length length color;

첫 번째 매개변수는 상자에서 그림자까지의 수평 거리를 나타냅니다.

두 번째 매개변수는 상자에서 그림자까지의 수직 거리를 나타냅니다.

세 번째 매개변수는 그림자의 흐림 반경을 나타냅니다.

네 번째 매개변수는 색상을 나타냅니다. of the Shadow

예 상자 내부 요소에 그림자를 사용하세요

상자 내부의 하위 요소에 개별적으로 그림자를 사용할 수 있습니다.

첫 글자 선택기나 첫 줄 선택기를 사용하여 첫 번째 텍스트나 첫 줄에만

그림자 효과

를 적용할 수 있습니다. 테이블 및 셀

에 그림자를 사용하세요. 상자를 사용할 수 있습니다. 그림자 속성 표와 표 내의 셀에 그림자 효과를 적용합니다.

요소의 너비와 높이에 대한 계산 방법 지정

CSS3에서는 box-sizing 속성을 사용하여 요소의 너비와 높이 계산 방법을 지정합니다.

box-sizing 속성

CSS에서는 다음을 사용합니다. width 속성과 height 속성은 요소의 너비와 높이를 지정합니다.

그러나 box-sizing 속성을 사용하면 width 속성과 height 속성으로 각각 지정된 width 및

height 값에 요소 내부의 패딩 영역과 테두리의 너비 및 높이가 포함되는지 여부를 지정할 수 있습니다. .

box-sizing 속성에 지정할 수 있는 속성값은 content-box 속성값과 border-box 속성값입니다. 전자는 요소의 너비와 높이에 내부 패딩 영역이 포함되지 않음을 의미하고, 후자는 요소의 너비와 높이에 내부 패딩 영역이 포함되고 너비와 높이가 포함됨을 의미합니다. 국경의.

이전에는 기본값이 content-box 속성 값을 사용하는 것이었습니다.

또한 box-sizing 속성에

속성 값을

padding

-box로 지정할 수 있습니다. 즉, 지정된 너비와 높이에는 콘텐츠의 너비와 높이, 콘텐츠의 너비와 높이가 포함됩니다. 테두리

상자

의 너비와 높이를 제외한 내부

패딩 영역은 요소의 전체 너비를 제어하는 ​​데 사용됩니다. 이 속성이 사용되지 않으면 스타일에 사용되는 기본

이 콘텐츠입니다. -box 속성 값, 컨텐츠 너비에만 해당됩니다. 사양이 지정되었지만 요소의 전체 너비가 지정되지 않았습니다.

어떤 경우에는 border-box 속성 값을 사용하면

페이지 레이아웃

이 더 편리해집니다.

예를 들어 두 div 요소의 border-box 속성 값을 50%로 설정하면 두 div 요소가 나란히 표시되도록 할 수 있습니다. Flexible Box를 만드는 방법은 다음과 같습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

html에 그림을 삽입하는 방법

html에서 div를 중앙에 배치할 때 주의해야 할 사항

html에서 if 댓글을 사용하는 방법

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