整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
计给出的样式是这样的：
设计图
毛笔的位置是当前的进度，毛笔左侧的部分为橘黄色，右侧为灰色。这里我抛砖引玉，列举三个实现方法。
用一张图片做为遮罩层，图片整体为白色，中间不规则的部分为透明色。下方是长方形的一个进度条。
<!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小时内与您取得联系。
