CSS3 기간을 사용하여 콘텐츠에 따라 자동으로 크기가 조정되는 배경

CSS3는 매우 실용적인 새 속성인 border-image를 제공합니다. 이 속성을 사용하면 콘텐츠가 증가하거나 감소함에 따라 자동으로 크기가 조절되는 배경을 만들 수 있습니다. 더 이상 고민하지 말고 코드를 살펴보겠습니다!
HTML:
<ol>     <li>第一条列表内容</li>     <li>第二条列表内容</li>     <li>第三条列表内容</li>     <li>第四条列表内容</li>     <li>第五条列表内容</li> </ol>
CSS:
border: 20px solid; <a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 200px; -webkit-border-image: url(border.png) 30 30 round;
렌더링:

이제 목록 항목을 추가합니다. Look을 참조하세요. 렌더링 시:

목록 수가 늘어날수록 배경이 자동으로 커지는데 정말 좋습니다!
border.png입니다:

border-image의 30 30에 대해 궁금한 점이 있을 수 있습니다:
-webkit-border-image: url(border.png) 30 30 round;
사진을 보세요 아래 :

위의 border-image에 있는 두 값은 ​​​​개인적으로 이해하기로는 첫 번째 값이 이미지의 상단과 하단의 픽셀 수를 나타내는 것입니다. 가장자리에서 "먹는다"는 경계선으로, 두 번째 값은 왼쪽과 오른쪽을 나타냅니다. 나머지 중간 영역은 배경으로 반복(또는 늘어납니다)됩니다.
획의 크기에 대해 여전히 질문이 있을 수 있습니다. border: 20px solid;
획이 50픽셀일 때 어떻게 보이는지 살펴보겠습니다.

이제 요점을 이해하셨습니다.
획의 색상은 표시되지 않으므로 쓰든 말든 상관없습니다.
자, 이제 콘텐츠에 따라 자동으로 크기가 조절되는 이런 종류의 배경을 만드는 방법을 알았으니 연습해 보세요!

위 내용은 CSS3 기간을 사용하여 콘텐츠에 따라 자동으로 크기가 조정되는 배경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!