HTML의 Progress 스타일을 사용자 정의하세요.

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

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

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

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

두 개의 의사 요소::-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

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

위 내용은 HTML의 Progress 스타일을 사용자 정의하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!