客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
像刻度这种东西都是重复性的，说到 效果图 原理 尺子刻度分成三种 基础用法 background-image: repeating-linear-gradient(90deg, red 0, red 50px, blue 0, blue 200px); 效果如下： 简单理解：
拆分步骤 1. 刻度尺盒子 首先得画一个盒子，宽度为
.ruler {
width: 16cm;
height: 3cm;
border: 1px solid $color-border;
}
效果如下： 2. 厘米刻度 一刻度的宽度为 background-image: repeating-linear-gradient(90deg, $color-main 0, $color-main 5px, transparent 0, transparent 1cm); 效果如下： 设置尺子两边边距为 background-position: .5cm 0; background-repeat: no-repeat; 效果如下： 发现最右边的没有 width: calc(16cm + 5px); 效果如下： 接下来给设置一下刻度的高度为 background-size: 100% 30px; 效果如下： 把位置改成到底部，因为之前的位置只设置了 background-position: .5cm 100%;
3. 半厘米刻度 步骤跟厘米刻度一致，做一些小调节即可，设置多背景用逗号分开，其他属性也是： background-image: "厘米刻度背景", repeating-linear-gradient(90deg, $color-main 0, $color-main 2px, transparent 0, transparent .5cm); background-size: "厘米刻度大小", 100% 20px; // 高度为20px 效果如下： 右边多出来一个刻度，所以背景的宽度不能为 background-size: "厘米刻度大小", calc(100% - 1cm) 20px; 效果如下： 发现 background-position: "厘米刻度位置", (.5cm + 1.5px) 100%; 效果如下： 4. 毫米刻度 步骤也跟上面一致： background-image: "厘米刻度背景", "半厘米刻度背景", repeating-linear-gradient(90deg, $color-main 0, $color-main 1px, transparent 0, transparent .1cm); background-size: "厘米刻度大小", "半厘米刻度大小", calc(100% - 1.2cm) 10px; // 高度为10px background-position: "厘米刻度位置", "半厘米刻度位置", calc(.5cm + 2px) 100%; // 裁剪背景 效果如下： 5. 数字 在盒子里面放 <div class="ruler"> <span>0-15</span> </div> 样式增加如下即可：
.ruler {
display: flex;
justify-content: space-between;
span {
flex: 1;
margin-top: 55px;
text-align: center;
}
}
效果如下：
洗剪吹 相似的案例还有螺纹进度条，由于是一样的，所以只放一个啦，托尼老师洗剪吹店门前那个彩带也还行哈哈：
最后 哈哈哈，不知道说啥，刻度尺没啥用，但是很有趣，不是吗 ❗ 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持极客世界。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论