本文共 981 字，大约阅读时间需要 3 分钟。

在这里我只介绍下边框的实现：

实现原理：伪类+缩放

工具：stylus预编译器

1、在 stylus文件夹中创建mixin.styl文件，内容如下：（即通过伪类+子绝父相 实现1px的下边框，这只是开始，并没有结束 ）

1. border-1px($color)

2. position: relative

3. &:after

4. display: block

5. position: absolute

6. left: 0

7. bottom: 0

8. width: 100%

9. border-top:1px solid $color

10. content: ' '

1. @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)

2. .border-1px

3. &::after

4. -webkit-transform: scaleY(0.7)

5. transform: scaleY(0.7)

6.  

7. @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)

8. .border-1px

9. &::after

10. -webkit-transform: scaleY(0.5)

11. transform: scaleY(0.5)

3、在 stylus文件夹中创建index.styl文件，内容如下：（其中的icon为图标字体的样式）

1. @import './mixin'

2. @import './icon'

3. @import './base'

4、在main.js中引入

import './common/stylus/index.styl'

5、直接在class中使用'border-1px',即可实现1px的下边框（上，左，右边框可参考如上代码）

6、最后来看看区别：

--------------------- 本文来自 手掌日月摘星辰 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/qq_34543438/article/details/73839086?utm_source=copy