网页实现0.5px的边框效果


3342 views

2017-04-09 04:31:38

我们都知道,px 是电子屏幕显示的最小单位,我们称之为像素,一般来说这个单位的数值只能是整数。 曾看过淘宝,京东,易迅,一号店等等电商的移动端网站,这些大的电商站的共同特点是做的精致,用户体验良好,其中在布局方面,0.5px 的线看上去就比 1px 的线看上去要精致很多。 但是我在做测试的时候发现,直接把 border 的值设置为 0.5px solid #222,手机上显示的效果与 1px solid #222 相同,这样看起来线条很粗,经过查找资料得到以下的实现办法: .border { position: relative } .border:after { position: absolute; top: 0; left: 0; display: block; box-sizing: border-box; width: 200%; height: 200%; border: 1px solid red; content: " "; transform: scale(.5); transform-origin: 0 0 }

上一篇:这7种设计误区,会影响网页内容的体验

下一篇:这可能是迄今为止最漂亮的wordpress响应式移动版客户端主题

扫码与我联系

★ ★ ★ ★ ★

“感谢你的鼓励与陪伴,我们的坚持才有意义”

创新与发展 – 优客记录保留所有权利

站内搜索 鄂ICP备16016329号 鄂公网安备42022202000038号