使用stylus(預處理)css
須要一個函數接收兩個參數 第一個須要在哪一個方向出現邊框 第二個邊框顏色html
$border1px(face,$color)
根據傳入的方向屬性,調整其餘參數web
l 左右方向函數
t 垂直方向spa
w 上下出現邊框則爲width反之爲height(邊框在方向上的長度)code
b 上出現邊框則爲bottom orm
x 爲哪一個方向上的縮放 htm
具體對應關係以下blog
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 }