如何用css3画一根优雅的0.5px细线
2018-03-12 11:05
267 查看
利用细线布局、区分页面是常用的手段。一般UI为了美观都会采用 0.5 px 而不是 1px 的细线。而这就造成了问题:由于屏幕和设计稿的分辨率转换,如果在border中直接定义为0.5 px, 会造成有时候细线被抹杀成 0 px,从而看不到, 如果定义为 1px, 则实际显示的时候会变成 2px, 就失去了UI设计细线的原意。那么,该如何画一根优雅的 .5px 细线呢?
这可以用css3的transform属性来做。直接写成scss 中的 mixin。
对需要画线的元素,这么引用 :
就介么简单~~~~
这可以用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元素画一根位于下放的细线,模拟 border-bottom header{ position: relative; &::after{ @include fiber--verti(bottom,#e6e6e6); } }
就介么简单~~~~
相关文章推荐
- css3 使用SVG做0.5px 的边框细线
- 使用css3做0.5px的细线
- CSS 选择符有哪些?哪些样式可以继承?优先级算法如何计算? CSS3新增伪类有那些?
- Spring Cloud中如何优雅的使用Feign调用接口
- 如何写优雅的代码(2)——#define?const?还是enum?
- 如何写优雅的代码(5)——远离临界区噩梦
- 如何优雅的实现recycleview加入顶部headerview,实现一起滑动效果
- 漫画:如何写出更优雅的单例模式?
- C/C++ 如何来自动优雅的涮别银家的贴子
- 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
- C++指针编程你要小心的陷阱——如何优雅的释放指针void*
- python基础===如何优雅的写代码(转自网络)
- 程序员如何优雅地拒绝产品经理
- 如何书写一手优雅的代码之3:不得不该面对的单例模式(设计模式)
- iOS如何优雅地消除应用角标详解
- 如何优雅的从SVN转到GIT
- 如何优雅地关闭Go channel
- Android中如何像 360 一样优雅的杀死后台服务而不启动
- 论C++如何优雅的使用数组
- 如何更“优雅”地部署Kubernetes集群