整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
計給出的樣式是這樣的：
設計圖
毛筆的位置是當前的進度，毛筆左側的部分為橘黃色，右側為灰色。這里我拋磚引玉，列舉三個實現方法。
用一張圖片做為遮罩層，圖片整體為白色，中間不規則的部分為透明色。下方是長方形的一個進度條。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不規則圖形進度條（1）</title>
<style>
h2, .controller {text-align: center;}
.plan {margin: 150px auto 50px; width: 680px; height: 60px;}
.plan-1 {background-color: #999;}
.progress-bar {
width: 0; height: 60px; max-width: 100%; position: relative; background-color: #FFBD44;
transition: width .5s ease;
}
.progress-bar .mask {
position: absolute; left: 0; top: 0; z-index: 1; width: 680px; height: 60px;
background: url("./progress_mask.png") no-repeat 0 0; background-size: 100% 100%;
}
.progress-bar .brush {
position: absolute; right: 0; bottom: 30px; z-index: 2; width: 42px; height: 100px;
transform: translateX(100%);
}
</style>
</head>
<body>
<h2>方法1：鏤空遮罩</h2>
<div class="plan plan-1">
<div class="progress-bar" id="progressBar">
<div class="mask"></div>
<img class="brush" src="./brush.png" />
</div>
</div>
<div class="controller">
<input id="controller" type="range" min="0" max="100" value="0" />
</div>
<script>
let controller=document.querySelector('#controller');
let progressBar=document.querySelector('#progressBar');
controller.addEventListener('change', progressChange);
function progressChange () {
let value=parseFloat(this.value);
let width=Math.round(680 * value / 100);
progressBar.style=`width: ${width}px`;
}
</script>
</body>
</html>用兩張圖片來實現，一張是灰色的，一張是橘黃色，灰色的在下方，默認顯示；橘黃色在上方，高度與下方灰色圖片一致，寬度方向被所在元素寬度裁切。
<style>
h2, .controller {text-align: center;}
.plan {margin: 150px auto 50px; width: 680px; height: 60px;}
.plan-2 {background: url("./progress_gray.png") no-repeat 0 0; background-size: auto 100%;}
.progress-bar {
width: 0; height: 60px; max-width: 100%; position: relative; transition: width .5s ease;
background: url("./progress_orange.png") no-repeat 0 0; background-size: auto 100%;
}
.progress-bar .brush {
position: absolute; right: 0; bottom: 30px; z-index: 2; width: 42px; height: 100px;
transform: translateX(100%);
}
</style>
<body>
<h2>方法2：圖片堆疊</h2>
<div class="plan plan-2">
<div class="progress-bar" id="progressBar">
<img class="brush" src="./brush.png" />
</div>
</div>
</body>方法3：濾鏡
用一張圖片來實現，一張橘黃色的，將進度條分成左右兩部分，背景圖一樣，只是右側的部分使用濾鏡置灰。
<style>
h2, .controller {text-align: center;}
.plan {margin: 150px auto 50px; width: 680px; height: 60px;}
.plan-3 {display: flex;}
.progress-bar {
width: 0; height: 60px; max-width: 100%; position: relative; transition: width .5s ease;
background: url("./progress_orange.png") no-repeat 0 0; background-size: auto 100%;
}
.progress-cover {
width: 0; flex-grow: 1; filter:grayscale(1);
background: url("./progress_orange.png") no-repeat right top; background-size: auto 100%;
}
.progress-bar .brush {
position: absolute; right: 0; bottom: 30px; z-index: 2; width: 42px; height: 100px;
transform: translateX(100%);
}
</style>
<body>
<h2>方法3：濾鏡</h2>
<div class="plan plan-3">
<div class="progress-bar" id="progressBar">
<img class="brush" src="./brush.png" />
</div>
<div class="progress-cover"></div>
</div>
</body>上述代碼的效果是這樣的：
效果圖
目前大多數人對于CSS的使用只是停留在基本層面，設置位置，寬高，背景色等等。但是CSS還有很多的高級使用技巧，在開發時省去很多時間。
今天我們就一起來看看CSS中的一些高級使用技巧，讓你的頁面更加的炫酷吧。
CSS
如何將一張彩色的圖片在頁面上展示成黑白圖片呢？
我們需要用到一個filter屬性，在webkit中，-webkit-filter專門為元素的渲染提供一些效果，比如灰度，亮度，模糊等。
使用灰度控制grayscale屬性，就可以很容易的將圖片置為黑白色。
我們看到下面一張圖片。
原始圖片
當我們加上以下一段代碼后。
CSS代碼
可以看到圖片如下所示。
處理過的圖片
有的時候我們將網頁的頂部設置為陰影效果，這個是怎么做到的呢？
利用body的偽元素:before，可以減少額外的元素。
在頂部增加一個div，設置一個高度，寬度為100%
將其position設置為fixed，然后設置偏移量為設定的高度值。
設置box-shadow屬性，值等于設定的高度值。
得到的代碼如下所示。
頁面頂部加陰影
運行完上述代碼后，就可以看到整個頁面頂部有陰影的效果。
假如有一個很簡單的頁面，需要所有的元素都垂直居中顯示，實現的方法其實很簡單。
將與align有關的屬性設置為center。
displag設置為flex。
得到的代碼如下所示。
垂直居中的CSS方法
設置以后，我們可以看到不管將窗口設置為多高，所有元素都是垂直居中的狀態。
但是這種方法有個弊端，就是會將所有元素水平排列，垂直居中，頁面元素過多時，頁面會被水平撐開，不太美觀。
因此這種方法建議在頁面元素少的情況下使用。
元素垂直居中
在一個使用ul>li創建的列表中，如果想要選擇其中的幾個元素，我們可以使用nth-child選擇器，例如:nth-child(1)代表第一個元素。
那么假如我們想選擇第一個到第三個元素，使用nth-child該怎么做呢？
很多人第一選擇是:nth-child(1)，:nth-child(2)，:nth-child(3)，然后設置屬性。
其實還有一種更簡單的方法，那就是使用負數選擇器。
:nth-child(-n+3)，就代表選擇從第一個到第三個元素。
我們可以通過以下例子測試，首先在看看頁面的HTML代碼，并將它們的display全部設置為none，這樣就可以將li全部隱藏起來。
HTML代碼
然后通過nth-child選擇器設置css屬性。
nth-child選擇器
最后看看頁面上的內容呈現，可以看出實際選中的li只有前三個，符合預期。
頁面內容
頁面的table元素，如果不對tr>td設置寬度，列td的寬度是會隨著內容的變化而變化，這樣就會造成頁面布局很難看。
我們可以將表格的每列設置成相同的寬度，這樣不管內容怎么變化都不會改變頁面的布局。
只需要使用如下一個屬性即可。
表格列等寬
實際的效果如下圖所示。
表格列等寬
在CSS3中新增了一個calc()方法，用于動態的計算值，不管是數值還是百分比，都可以參與計算。
這個方法非常適用于自適應的容器中，動態計算寬高，間距(margin,padding)，邊框(border)等值，這樣在容器大小變化的時候，不會改變元素之間的布局。
例如以下我們定義的兩個div。
CSS屬性
看到的頁面效果如下圖所示。
calc()效果
假設在頁面上有一個很重要的區域，只是只讀的，不能讓鼠標點擊，可以直接禁用掉鼠標點擊事件。
這個在CSS3中新增了pointer-event屬性，只要將其設置為none即可。
禁用鼠標點擊
有的時候我們可以看到頁面上有一些文字漸變的效果，如下圖所示。
漸變文字
這個效果是怎么實現的呢?
通過設置偽元素，然后在偽元素中使用-webkit-mask-image屬性，這個屬性是專門用來產生遮罩效果的。
然后將遮罩效果的字與原來的文章重合，就可以達到上述效果。
我們設置一個h2標簽，然后設置data-text屬性，date-text屬性值與頁面顯示值一樣。
HTML元素
然后設置對應的CSS屬性。
CSS屬性
當我們在頁面運行后，我們就可以得到上面的文字漸變效果。
和上面的漸變文本類似，模糊文本也有專門的屬性可以設置，那就是text-shadow。
通過下面一段簡單的代碼，就可以得到模糊文本了。
模糊文本樣式
得到的效果如下圖所示。
模糊文本
今天這篇文章主要介紹了CSS中幾個高級的使用技巧，可以讓你在實現相同效果時，減少很多的代碼量，提高工作效率。
大家要好好掌握~
目前大多數人對于CSS的使用只是停留在基本層面，設置位置，寬高，背景色等等。但是CSS還有很多的高級使用技巧，在開發時省去很多時間。
今天我們就一起來看看CSS中的一些高級使用技巧，讓你的頁面更加的炫酷吧。
CSS
如何將一張彩色的圖片在頁面上展示成黑白圖片呢？
我們需要用到一個filter屬性，在webkit中，-webkit-filter專門為元素的渲染提供一些效果，比如灰度，亮度，模糊等。
使用灰度控制grayscale屬性，就可以很容易的將圖片置為黑白色。
我們看到下面一張圖片。
原始圖片
當我們加上以下一段代碼后。
CSS代碼
可以看到圖片如下所示。
處理過的圖片
有的時候我們將網頁的頂部設置為陰影效果，這個是怎么做到的呢？
利用body的偽元素:before，可以減少額外的元素。
在頂部增加一個div，設置一個高度，寬度為100%
將其position設置為fixed，然后設置偏移量為設定的高度值。
設置box-shadow屬性，值等于設定的高度值。
得到的代碼如下所示。
頁面頂部加陰影
運行完上述代碼后，就可以看到整個頁面頂部有陰影的效果。
假如有一個很簡單的頁面，需要所有的元素都垂直居中顯示，實現的方法其實很簡單。
將與align有關的屬性設置為center。
displag設置為flex。
得到的代碼如下所示。
垂直居中的CSS方法
設置以后，我們可以看到不管將窗口設置為多高，所有元素都是垂直居中的狀態。
但是這種方法有個弊端，就是會將所有元素水平排列，垂直居中，頁面元素過多時，頁面會被水平撐開，不太美觀。
因此這種方法建議在頁面元素少的情況下使用。
元素垂直居中
在一個使用ul>li創建的列表中，如果想要選擇其中的幾個元素，我們可以使用nth-child選擇器，例如:nth-child(1)代表第一個元素。
那么假如我們想選擇第一個到第三個元素，使用nth-child該怎么做呢？
很多人第一選擇是:nth-child(1)，:nth-child(2)，:nth-child(3)，然后設置屬性。
其實還有一種更簡單的方法，那就是使用負數選擇器。
:nth-child(-n+3)，就代表選擇從第一個到第三個元素。
我們可以通過以下例子測試，首先在看看頁面的HTML代碼，并將它們的display全部設置為none，這樣就可以將li全部隱藏起來。
HTML代碼
然后通過nth-child選擇器設置css屬性。
nth-child選擇器
最后看看頁面上的內容呈現，可以看出實際選中的li只有前三個，符合預期。
頁面內容
頁面的table元素，如果不對tr>td設置寬度，列td的寬度是會隨著內容的變化而變化，這樣就會造成頁面布局很難看。
我們可以將表格的每列設置成相同的寬度，這樣不管內容怎么變化都不會改變頁面的布局。
只需要使用如下一個屬性即可。
表格列等寬
實際的效果如下圖所示。
表格列等寬
在CSS3中新增了一個calc()方法，用于動態的計算值，不管是數值還是百分比，都可以參與計算。
這個方法非常適用于自適應的容器中，動態計算寬高，間距(margin,padding)，邊框(border)等值，這樣在容器大小變化的時候，不會改變元素之間的布局。
例如以下我們定義的兩個div。
CSS屬性
看到的頁面效果如下圖所示。
calc()效果
假設在頁面上有一個很重要的區域，只是只讀的，不能讓鼠標點擊，可以直接禁用掉鼠標點擊事件。
這個在CSS3中新增了pointer-event屬性，只要將其設置為none即可。
禁用鼠標點擊
有的時候我們可以看到頁面上有一些文字漸變的效果，如下圖所示。
漸變文字
這個效果是怎么實現的呢?
通過設置偽元素，然后在偽元素中使用-webkit-mask-image屬性，這個屬性是專門用來產生遮罩效果的。
然后將遮罩效果的字與原來的文章重合，就可以達到上述效果。
我們設置一個h2標簽，然后設置data-text屬性，date-text屬性值與頁面顯示值一樣。
HTML元素
然后設置對應的CSS屬性。
CSS屬性
當我們在頁面運行后，我們就可以得到上面的文字漸變效果。
和上面的漸變文本類似，模糊文本也有專門的屬性可以設置，那就是text-shadow。
通過下面一段簡單的代碼，就可以得到模糊文本了。
模糊文本樣式
得到的效果如下圖所示。
模糊文本
今天這篇文章主要介紹了CSS中幾個高級的使用技巧，可以讓你在實現相同效果時，減少很多的代碼量，提高工作效率。
大家要好好掌握~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
