>웹 프론트엔드 >CSS 튜토리얼 >웹 페이지 진행 표시줄의 간단한 구현 방법

웹 페이지 진행 표시줄의 간단한 구현 방법

一个新手
一个新手원래의
2017-09-23 10:49:052301검색

매우 간단한 진행률 표시줄

은 간단한 CSS 속성으로 구현할 수 있습니다: cilp

clip:rect(top,right,bottom,left
)

먼저

<style>        
.box {            
     width: 200px;           
     height: 20px;            
     background:#ccc;            
     border-radius:10px;           
     position:relative       
      }       
.clip {            
    position: absolute;            
    width: 100%;
   height: 100%;            
   clip: rect(0px,100px,20px,0px);            
   background: red;            
   border-radius:10px;        
   }    
   </style>
<p class=&#39;box&#39;>
    <span class=&#39;clip&#39;></span>
</p>

표시 효과를 설명하는 작은 프로그램을 작성하세요:

클립 제공. 플러스 위치: 절대; 너비: 100%; 상자에 동일한 너비와 높이의 상자를 추가하는 것과 비교하면 배경은 빨간색입니다. ) ,이 상자의 표시 영역을 제어하는 ​​것에 비해 거리 값을 오른쪽으로 변경하면 표시 영역이 더 커집니다

위 내용은 웹 페이지 진행 표시줄의 간단한 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.