HTML5 진행 스타일을 사용자 정의하기 위한 그래픽 코드에 대한 자세한 설명

Progress 요소는 HTML5 표준 초안에 새로 추가된 요소 중 하나입니다. W3C 이 요소의 정의를 보려면 여기를 클릭하세요. 기본적으로 Progress는 시스템 기본 스타일과 동일한 진행률 표시줄을 생성합니다. Webkit의 Progress에 대한 기본 스타일 정의는 여기에서 찾을 수 있습니다. Windows 7과 MaxOS Lion에서의 디스플레이 효과는 다음과 같습니다.

꽤 괜찮아 보이는데 Windows XP에서 실행하면 어떨까요? ? 그것에 대해 생각하는 것만으로도 골치 아픈 일이 될 것입니다. 일관성을 위해 많은 경우에 우리는 여전히 이 진행률 표시줄의 스타일을 제어할 수 있기를 원합니다.

Webkit 프로젝트에서 Element Progress의 정의를 확인했습니다. 렌더링 시 진행 상황이 다음 구조로 구문 분석됩니다.

<progress>
    ┗ <p> ::-webkit-progress-bar
         ┗ <p>::-webkit-progress-value

Through::-webkit-progress-bar 및 ::-webkit- Progress-value 두 개의 의사 요소 선택기(이전의 의사 요소 이름은::-webkit-progress-bar-value였지만, 올해 상반기 패치로 현재의 이름으로 변경되었습니다. 여기에서 볼 수 있습니다. Chromium의 관련 문제), 첫 번째와 두 번째 레이어에서 두 p의 스타일을 정의할 수 있습니다.

예:

progress {
    border-radius: 2px;
    border-left: 1px #ccc solid;
    border-right: 1px #ccc solid;
    border-top: 1px #aaa solid;
    background-color: #eee;
}
 
progress::-webkit-progress-bar {
    background-color: #d7d7d7;
}
 
progress::-webkit-progress-value {
    background-color: #aadd6a;
}

위 CSS는 다음 효과로 진행률 표시줄을 정의할 수 있습니다.

CSS도 지원합니다 애니메이션 , 배경 사진 및 기타 기능을 사용하여 필요에 따라 완전히 개인화된 진행률 표시줄을 만들 수 있습니다. 또한, Gecko 코어 브라우저는 유사한 의사 요소::-moz-progress-bar를 통해 동일한 효과를 얻을 수도 있습니다. 이 요소는 모든 IE 시스템에서 지원되지 않습니다.

위 내용은 HTML5 진행 스타일을 사용자 정의하기 위한 그래픽 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!