edi 长度 边框 abs dia logs http col import
使用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)‘
- }
- }
- <div class="product">
- <div class="border-1px">
- <p>111</p>
- <p>111</p>
- <p>111</p>
- <p>111</p>
- </div>
- </div>
- <style scoped lang="stylus">
- @import ‘../common/css/index‘
- .product
- $border1px(top,red)
- border-bottom 1px solid red
- </style>
效果图
完整代码
- $border1px(face,$color)
- 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 ‘ ‘
- }
- @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)‘
- }
- }
移动端1px 边框完整方案(四个方向)
edi 长度 边框 abs dia logs http col import
原文:http://www.cnblogs.com/-maomao-/p/7821344.html
来源: http://www.bubuko.com/infodetail-2391887.html