作者:手机用户2502873443 | 来源:互联网 | 2023-05-18 20:45
利用细线布局、区分页面是常用的手段。一般UI为了美观都会采用0.5px而不是1px的细线。而这就造成了问题:由于屏幕和设计稿的分辨率转换,如果在border中直接定义为0.5px,
利用细线布局、区分页面是常用的手段。一般UI为了美观都会采用 0.5 px 而不是 1px 的细线。而这就造成了问题:由于屏幕和设计稿的分辨率转换,如果在border中直接定义为0.5 px, 会造成有时候细线被抹杀成 0 px,从而看不到, 如果定义为 1px, 则实际显示的时候会变成 2px, 就失去了UI设计细线的原意。那么,该如何画一根优雅的 .5px 细线呢?
这可以用css3的transform属性来做。直接写成scss 中的 mixin。
@mixin fiber--verti($direction,$linecolor){
@include pse;
left:0;
#{$direction}:0;
width: 100%;
height: 1px;
border-top:1px solid $linecolor;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
@mixin fiber--hori($direction,$linecolor){
@include pse;
#{$direction}:0;
top:0;
height: 100%;
width: 1px;
border-left:1px solid $linecolor;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
对需要画线的元素,这么引用 :
header{
position: relative;
&::after{
@include fiber--verti(bottom,#e6e6e6);
}
}
就介么简单~~~~