배경 이미지가있는 CSS 경계에 대한 더 많은 제어

표준 CSS 테두리는 점선 또는 점선 스타일에 대한 제한된 사용자 정의를 제공합니다. 예를 들어:

 .상자 {
   테두리 : 1px 점선 검은 색;
   테두리 : 3px 점선 빨간색;
}

이 접근법은 대시/갭 길이, 각도, 페이딩 또는 애니메이션에 대한 제어가 부족합니다. 그러나 영리한 기술은 이러한 한계를 극복 할 수 있습니다.

Amit Sheen의 점선 테두리 생성기는 4 개의 다중 배경을 사용하는 강력한 방법을 보여줍니다. background 속성은 쉼표로 구분 된 값을 허용합니다. 4 개의 배경 (상단, 오른쪽, 하단, 왼쪽)을 정의함으로써 각각의 테두리 스타일로 광범위한 제어가 이루어집니다.

예:

 .상자 {
  백그라운드 이미지 : 반복-선형 그레이드 (0DEG, #333333, #333333 10PX, 투명 10px, 투명 20px, #333333 20px), 반복 선형 학년 (90deg, #333333, #333333333333333333333333333333333333333333333333333333333333333333333333333까지까지 투명합니다. 20px), 반복-선형 그레이드 (180deg, #333333, #333333 10px, 투명 10px, 투명 20px, #333333 20px), 반복 선형 등급 (270deg, #333333, #33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333까지까지 투명합니다. 20px);
  배경 크기 : 3px 100%, 100% 3px, 3px 100%, 100% 3px;
  배경 위치 : 0 0, 0 0, 100% 0, 0 100%;
  배경 반복 : 비 반복;
}

이것은 이전에 간단한 경계로 사용할 수없는 고급 스타일 옵션을 잠금 해제합니다.

위 내용은 배경 이미지가있는 CSS 경계에 대한 더 많은 제어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!