linear-gradient实现Ps标尺

语法

background: linear-gradient(*direction*, *color-stop1*, *color-stop2, …);

direction:方向

color-stop1 to color-stop2:颜色1到颜色2的渐变

例如:

/* 渐变轴为90度，从蓝色渐变到红色 */
linear-gradient(90deg, blue, red);

/* 从右到左，从蓝色渐变到红色 */
linear-gradient(to left, blue, red);
复制代码

具有多个颜色停止的渐变

如果第一个颜色中间点没有 <length> 或 <percentage>属性,那么它默认为0%。如果最后一个颜色中间点没有 <length> 或者 <percentage>属性, 则默认为100%。如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。

颜色中间点必须按照顺序声明。给起始和终止的颜色中间值赋值后，如果一个颜色中间点的位置比任何一个颜色中间点的位置都要小，那它的位置会按照离它最近的一个颜色中间点来计算。

我们也可以设置颜色渐变的距离，例如

/* 从右到左，从0%渐变到75% */
background: linear-gradient(to left, #333 0%, #eee 75%);
复制代码

实现Ps 标尺

HTML

<div class="ruler v">
  <ul class="scale">
    <li>1100</li>
    <li>1050</li>
    <li>1000</li>
    <li>950</li>
    <li>900</li>
    <li>850</li>
    <li>800</li>
    <li>750</li>
    <li>700</li>
    <li>650</li>
    <li>600</li>
    <li>550</li>
    <li>500</li>
    <li>450</li>
    <li>400</li>
    <li>350</li>
    <li>300</li>
    <li>250</li>
    <li>200</li>
    <li>150</li>
    <li>100</li>
    <li>50</li>
  </ul>
</div>
复制代码

CSS

50px刻线

.ruler {
    background-color: #303030;
    background-image: linear-gradient(90deg, #696969 0, #696969 2%, transparent 2%);
    background-size: 50px 20px;
    background-repeat: repeat-x;
    min-height: 20px;
    z-index: 99;
}
复制代码

首先要确定background-size这里的50px和20px都是控制渐变的边界

linear-gradient从0%开始到2%，并且以透明色结束，利用repeat循环产生一条条间隔50px的分界线

25px刻线

然后是25px的中点线，这里的实现用到了两个渐变组合

第一个渐变是从上到下的从0%渐变到70%，以透明色结尾

第二个是从左到右的25px的中点线，从50%开始到52%绘制了2%的短刻线

linear-gradient(180deg, #303030 70%, transparent 70%), linear-gradient(90deg, transparent 50%, #696969 50%, #696969 52%, transparent 52%);
复制代码

10px刻线

最后每隔10%绘制一条2%的刻度线

linear-gradient(90deg, transparent 10%, #696969 10%, #696969 12%, transparent 12%, transparent 20%, #696969 20%, #696969 22%, transparent 22%, transparent 30%, #696969 30%, #696969 32%, transparent 32%, transparent 40%, #696969 40%, #696969 42%, transparent 42%, transparent 60%, #696969 60%, #696969 62%, transparent 62%, transparent 70%, #696969 70%, #696969 72%, transparent 72%, transparent 80%, #696969 80%, #696969 82%, transparent 82%, transparent 90%, #696969 90%, #696969 92%, transparent 92%)
复制代码

总结

最后将linear-gradient合体,请注意顺序，顺序错误将无法实现

background-image: linear-gradient(90deg, #696969 0, #696969 2%, transparent 2%), linear-gradient(180deg, #303030 70%, transparent 70%), linear-gradient(90deg, transparent 50%, #696969 50%, #696969 52%, transparent 52%), linear-gradient(180deg, #303030 85%, transparent 85%), linear-gradient(90deg, transparent 10%, #696969 10%, #696969 12%, transparent 12%, transparent 20%, #696969 20%, #696969 22%, transparent 22%, transparent 30%, #696969 30%, #696969 32%, transparent 32%, transparent 40%, #696969 40%, #696969 42%, transparent 42%, transparent 60%, #696969 60%, #696969 62%, transparent 62%, transparent 70%, #696969 70%, #696969 72%, transparent 72%, transparent 80%, #696969 80%, #696969 82%, transparent 82%, transparent 90%, #696969 90%, #696969 92%, transparent 92%);
复制代码

转载于:https://juejin.im/post/5cf5e58be51d455a2f220221