wswmsword / postcss-mobile-forever

一款 PostCSS 插件,将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
https://wswmsword.github.io/examples/mobile-forever/vanilla/
MIT License
306 stars 19 forks source link

`border` 属性的实现,用 `box-shadow` 去模拟是否会更合适 #36

Closed hooray closed 6 months ago

hooray commented 6 months ago

目前设置开启 border 后,在暗黑模式下左右两侧会显示白边

image

虽然可以设置改变颜色,但 border 会占用实际的空间,导致容器实际宽度会减 2px ,这应该是不符合预期的

image

而用 box-shadow 则不会占用实际的像素,就像这样:

box-shadow: -1px 0 0 0 #ccc, 1px 0 0 0 #ccc;
wswmsword commented 6 months ago

的确 box-shadow 会更好一点,颜色可以选深色半透明,就可以适应黑/白模式了。最近我修改下。

wswmsword commented 6 months ago

这个问题改好了,发布在版本 4.1.3 里,打开 border 之后,现在会生成 box-shadow: 0 0 0 1px #8888881f;,移除了原来的 border-leftborder-rightbox-sizing 属性。