用css2屬性clip實現網頁進度條

2021-06-27 10:59:30 字數 659 閱讀 4294

前言

css2的屬性clip

如果你不是很明白clip屬性,那麼我就用大白話來解釋一下,clip:rect(0px,0px,0px,0px)有四個值,同理是順時針方向賦值,上右下左,記錄改元素裁切方式,

例如:乙個元素div,其width:300px;height:300px; clip:rect(0px,100px,60px,0px)

表示裁切的左邊距離原元素上邊緣0px;

裁切的右邊距離原始左邊緣100px;

裁切的下邊距離原始元素上邊緣是60px;

裁切的左邊距離原始元素元素左邊距離是0px;

如果明白了,那麼再來一張圖測試一下,如果設定是clip:rect(10px,100px,40px,5px)應該啥樣子呢?如下

說到這裡,我就當你明白了,繼續往下說,

所以現在我們要改變的就是裁切元素的右值,讓其等於制定的寬度,那麼元素就全部呈現出來了。

設定進度條樣式

對於css我做的還是比較low的,那麼還是要貼出我很low的css**,

用css2屬性clip實現網頁進度條

如果你不是很明白clip屬性,那麼我就用大白話來解釋一下,clip rect 0px,0px,0px,0px 有四個值,同理是順時針方向賦值,上右下左,記錄改元素裁切方式,例如 乙個元素div,其width 300px height 300px clip rect 0px,100px,60px,0p...

CSS2背景屬性

background 用於設定background color,background image,background repeat,background attachemnt,background position屬性 background color 背景顏色 屬性 取值 red ff0000 ...

前端 CSS2常用屬性

font weight font size font family line height font variant font direction 設定文字方向。vertical align 設定元素的垂直對齊 text align 對齊元素中的文字 text decoration 向文字新增修飾 ...