html5 진행 태그에서 진행 표시줄 색상을 변경하는 방법은 무엇입니까? 진행률 표시줄에 대한 자세한 설명
- 寻∝梦원래의
- 2018-09-04 10:39:3816373검색
이 글에서는 html5의 새로운 진행률 표시줄 태그의 스타일 분석을 소개하고, html5 진행률 태그를 통해 진행률 표시줄의 색상을 변경하는 방법을 설명합니다. 다음으로 이 글을 살펴보겠습니다
우선 html5 진행 태그 소개에 대해 알아봅시다:
진행률은 진행률 표시줄을 정의하는 HTML5의 새로운 요소로, 파일 업로드 진행률, 파일 다운로드 진행률을 표시하는 데 사용할 수 있으며 로딩 상태로도 사용할 수 있습니다. 로딩 바.
팁: 작업 진행 상황을 표시하려면 javaScript와 함께
참고:
html5 진행률 진행률 표시줄 구문:
<progress value='70' max='100'></progress>
html5 진행률 태그의 예를 준비해 보겠습니다. # 🎜 🎜#
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
progress{
width: 168px;
height: 5px;
}
progress::-webkit-progress-bar
{
background-color:#d7d7d7;
}
progress::-webkit-progress-value
{
background-color:orange;
}
</style>
</head>
<body>
<progress value="100" max="100" class="hot">
</body>
</html>설명, Chrome 브라우저 진행 상황은 다음 구조로 렌더링됩니다progress:-webkit-progress-bar 모든 진행# 🎜🎜## 🎜🎜#:-webkit-progress-value 진행 완료이 두 의사 요소로 스타일을 지정하세요. 하지만 IE10과 같은 다른 브라우저에서는 다릅니다. 이 두 의사 요소는 색상 스타일을 직접 사용하여 완료된 진행의 색상을 수정할 수 있으며 전체 진행은 다음과 같습니다. background# 🎜🎜#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;
}위는 진행중인 컬러 CSS 스타일에 대한 코드입니다. bar 표시 효과는 다음과 같습니다. ：
좋아, 위는 HTML5에서 새로운 진행 태그를 사용하고 색상을 변경하는 방법에 대한 기사입니다. .궁금하신 점은 아래로 문의주세요.
【에디터 추천】
html에서 include 태그란 무엇인가요? html include는 구성 분석을 구현합니다
위 내용은 html5 진행 태그에서 진행 표시줄 색상을 변경하는 방법은 무엇입니까? 진행률 표시줄에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.