使用stylus(预处理)
需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色
$border1px(face,$color)
根据传入的方向属性，调整其他参数
l 左右方向
t 垂直方向
w 上下出现边框则为width反之为height（边框在方向上的长度）
b 上出现边框则为bottom
x 为哪个方向上的缩放
具体对应关系如下
face==top && (l=left t=top b=bottom w=width x=scaleY) face==bottom && (l=left b=top t=bottom w=width x=scaleY) face==left && (l=left t=top b=right w=height x=scaleX) face==right && (l=right t=top b=left w=height x=scaleX)
下面是边框
.border-1px { position relative } .border-1px::after { display block position absolute {l} 0 {t} 0 {w} 100% border-{b} 1px solid $color content ‘ ‘ }
媒体查询
这里需要使用字符串拼接 写成x(0.7) x将不会赋值
@media (-webkit-min-device-pixel-ratio 1.5),(min-device-pixel-ratio1.5) { .border-1px::after { -webkit-transform x+‘(0.7)‘ transform x+‘(0.7)‘ } } @media (-webkit-min-device-pixel-ratio 2),(min-device-pixel-ratio 2) { .border-1px::after { -webkit-transform x+‘(0.5)‘ transform x+‘(0.5)‘ } }
html
<div class="product"> <div class="border-1px"> <p>111</p> <p>111</p> <p>111</p> <p>111</p> </div> </div>
css
<style scoped lang="stylus"> @import ‘../common/css/index‘ .product $border1px(top,red) border-bottom 1px solid red </style>
效果图
完整代码
1 $border1px(face,$color) 2 face==top && (l=left t=top b=bottom w=width x=scaleY) 3 face==bottom && (l=left b=top t=bottom w=width x=scaleY) 4 face==left && (l=left t=top b=right w=height x=scaleX) 5 face==right && (l=right t=top b=left w=height x=scaleX) 6 .border-1px { 7 position relative 8 } 9 .border-1px::after { 10 display block 11 position absolute 12 {l} 0 13 {t} 0 14 {w} 100% 15 border-{b} 1px solid $color 16 content ‘ ‘ 17 } 18 @media (-webkit-min-device-pixel-ratio 1.5),(min-device-pixel-ratio1.5) { 19 .border-1px::after { 20 -webkit-transform x(0.7) 21 transform x+‘(0.7)‘ 22 } 23 } 24 @media (-webkit-min-device-pixel-ratio 2),(min-device-pixel-ratio 2) { 25 .border-1px::after { 26 -webkit-transform x+‘(0.5)‘ 27 transform x+‘(0.5)‘ 28 } 29 }
原文：http://www.cnblogs.com/-maomao-/p/7821344.html