html5의 진행 태그에 대한 CSS 스타일 요약

HTML5에서는 진행률 표시줄 을 나타내는 데 사용되는 진행률 태그를 추가했습니다.

<progress value="100" max="100" class="hot">

표시 효과는 다음과 같습니다.

CSS 스타일 코드는 다음과 같습니다.

progress{
        width: 168px;
    height: 5px;
        
}progress::-webkit-progress-bar{
       background-color:#d7d7d7;
}progress::-webkit-progress-value{
     background-color:orange;
}

설명, Chrome 브라우저에서

progress는 다음 구조로 렌더링됩니다

progress

↓

: :-webkit-progress-bar 전체 진행

↓

::-webkit-progress-value 진행 완료

이 두 의사 요소로 스타일을 지정하세요.

그러나 IE10과 같은 다른 브라우저에서는 이 두 의사 요소가 작동하지 않습니다. 색상 스타일을 직접 사용하여 완료된 진행의 색상을 수정할 수 있으며 전체 진행은 배경입니다

progress-bar FireFox에서는 완료된 진행을 의미하며, 배경은 전체 진행을 의미합니다. Opera에서는 이 스타일이 브라우저 기본 스타일만 될 수 있습니다.

그래서 호환성 작성 방법은 다음과 같이 생각하면 됩니다

progress{
   color:orange; /*兼容IE10的已完成进度背景*/
   border:none;
   background:#d7d7d7;/*这个属性也可当作Chrome的已完成进度背景，只不过被下面的::progress-bar覆盖了*/      
   }progress::-webkit-progress-bar{
   background:#d7d7d7;
}progress::-webkit-progress-value,
progress::-moz-progress-bar{
     background:orange;
}

위 내용은 html5의 진행 태그에 대한 CSS 스타일 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!