基於stylus的border一像素線問題與ellipsis多行的兼容方案

　　　　border-radius：

 1 border($border-width = 1px, $border-color = #ccc , $border-style = solid, $radius =  null) 
 2     // 爲邊框位置提供定位參考
 3     position: relative;
 4     if $border-width == null 
 5         $border-width: 0;
 6     
 7     border-radius: $radius;
 8     &::after 
 9         // 用以解決邊框layer遮蓋內容
10         pointer-events: none;
11         position: absolute;
12         z-index: 999;
13         top: 0;
14         left: 0;
15         // fix當元素寬度出現小數時，邊框可能顯示不全的問題
16         // overflow: hidden;
17         content: "\0020";
18         border-color: $border-color;
19         border-style: $border-style;
20         border-width: $border-width;
21         // 適配dpr進行縮放
22         @media (max--moz-device-pixel-ratio: 1.49),(-webkit-max-device-pixel-ratio: 1.49),(max-device-pixel-ratio: 1.49),(max-resolution: 143dpi),(max-resolution: 1.49dppx) 
23             width: 100%;
24             height: 100%;
25             if $radius != null 
26                 border-radius: $radius;
27         
28         @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) 
29             width: 200%;
30             height: 200%;
31             transform : scale(.5);
32             if $radius != null 
33                 border-radius: $radius * 2;
34         
35         @media (min--moz-device-pixel-ratio: 2.5),(-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) 
36             width: 300%;
37             height: 300%;
38             transform : scale(.33333);
39             if $radius != null 
40                 border-radius: $radius * 3;
41             
42         transform-origin : 0 0;

View Code

 1 border($border-width = 1px, $border-color = #ccc , $border-style = solid, $radius =  null) 
 2     // 爲邊框位置提供定位參考
 3     position: relative;
 4     if $border-width == null 
 5         $border-width: 0;
 6     
 7     border-radius: $radius;
 8     &::after 
 9         // 用以解決邊框layer遮蓋內容
10         pointer-events: none;
11         position: absolute;
12         z-index: 999;
13         top: 0;
14         left: 0;
15         // fix當元素寬度出現小數時，邊框可能顯示不全的問題
16         // overflow: hidden;
17         content: "\0020";
18         border-color: $border-color;
19         border-style: $border-style;
20         border-width: $border-width;
21         // 適配dpr進行縮放
22         @media (max--moz-device-pixel-ratio: 1.49),(-webkit-max-device-pixel-ratio: 1.49),(max-device-pixel-ratio: 1.49),(max-resolution: 143dpi),(max-resolution: 1.49dppx) 
23             width: 100%;
24             height: 100%;
25             if $radius != null 
26                 border-radius: $radius;
27         
28         @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) 
29             width: 200%;
30             height: 200%;
31             transform : scale(.5);
32             if $radius != null 
33                 border-radius: $radius * 2;
34         
35         @media (min--moz-device-pixel-ratio: 2.5),(-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) 
36             width: 300%;
37             height: 300%;
38             transform : scale(.33333);
39             if $radius != null 
40                 border-radius: $radius * 3;
41             
42         transform-origin : 0 0;

 

ellipsis：

 1 wrap($is-wrap = true)
 2   if $is-wrap == true
 3     word-wrap: break-word;
 4     word-break: break-all;
 5   else
 6     white-space: nowrap;
 7     
 8 
 9 ellipsis($width = null, $line-clamp = 1) 
10   overflow: hidden;
11   text-overflow: ellipsis;
12   width: $width;
13   if abs($line-clamp) > 1
14     // 要使得多行截取生效，display的值只能爲-webkit-box
15     display: -webkit-box !important;
16     -webkit-line-clamp: $line-clamp;
17     flex-direction column
18     wrap()
19   else
20     wrap(false)

 

使用方法：

　　引入：

　　　　

　　賦值：

　　　　如：