html5 做手机H5页面如何让线条比1像素显得更细？

Posted 2023-04-13

html5 做手机H5页面如何让线条比1像素显得更细？

不可以的，border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度，最小为1px。
建议可以使用图片背景，这样子可以比1px更小的。 参考技术A 1、1像素已经是最细的了
2、是否在手机看起来大，不像1像素？
3、是否在head中加上适合手机的代码？如：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no," /> 参考技术B 那就设置比1更小的值啊border：0.5px；这样不久比1更小了 参考技术C 1像素已经最细，不可能更细。
1像素线条透明度降低，这样的线条就会显得很细！ 参考技术D 没有比1像素更小的线条了，，

最小单位就是1像素。。。

如何比sketch和axure更方便地给原型做交互？

在快速的工作环境中，我们现在都希望在工作的各个环节中提高效率。有些产品设计师们做产品原型时，会感觉sketch或者axure添加交互的方式不够快捷。下面就提供一种解决方案。

使用工具：墨刀。

交互链接及动画设置面板

使用墨刀可以非常方便地创建页面间链接，墨刀独创的拖拽链接方式，让页面间的链接关系清晰呈现眼前，要创建页面间链接，只需要选中组件，然后拖动组件右侧的小圆圈到目标页面或状态就可以了，如下图：

链接创建完毕后，会弹出链接设置面板。链接面板包含5个部分：手势、转场动画、动效时长、定时器以及相关跳转设置，下面我们来依次介绍这5个部分。

手势：

对应的手势操作可以触发页面跳转，可供选择的手势有7种：点击、上下左右滑动、长按、双击。

全局手势有8种手势可以选择：点按、上下左右滑动、长按、双击以及摇一摇。

最后一个钟表图标的手势为定时器，选择定时器后可设置页面自动跳转时间。

转场动画：

页面切换动画选择，共有17种特效可供选择，如果您不确定需要哪种效果，可以直接将鼠标移到动画上面预览切换效果。

动效时长：

设置不同的时长可直接影响动画的切换速度；如无特殊需要可不做设置。

定时器：

可以设定当前链接的自动跳转时间，到达时间后，即使用户没有任何操作，应用也会自动跳转到目标页面，适合制作定时轮播图、启动页等等。

重置目标页为初始状态：

此功能默认处于选中状态，若取消选择则代表不重置目标跳转页的初始状态。

举个例子：页面A为长页面，A中页面下部某组件链接至B页面；B中按钮设置链接返回A，并取消勾选重置目标页状态；页面返回后，A展示会跳转之前的内容或状态。（A为微信阅读页，跳出后返回A，可以继续之前的页面位置继续阅读。）

状态链接动画面板设置

状态链接与页面链接不同点在于新增了「延迟」设置选项，延迟时间是从手势触发时算起，到达设定时间后页面才会发生跳转。

初始动效

初始动效设置在组件设置面板中，可以设置组件的起始动效，内置30余种动效供选择（如渐隐、抖动、旋转等）。设置不同的动效时长、重复次数，可以达到不同的动效效果。

返回上一页

如果一个页面有多个入口，这时你可能会需要创建一个返回上一页的链接，当用户点击这个按钮时自动跳转到上一级的来源页面。

「返回上一页」位于工作区画布的左上角，外观为白色矩形悬浮区域。（如下图）

使用方法：

只需将页面内「返回」按钮的链接拖拽至「返回上一页」的区域内，即可完成链接设置。

此时，该链接的默认切换动画为页面“左移入”，你也可以根据需要修改移入效果。

注意：

当你处于首页时，设置「返回上一页」的链接是无效的，因为首页是没有地方可以返回的。

自定义动画

自定义动画可以通过使用母版及页面状态功能实现，如使用母版制作定时轮播图，使用页面状态功能制作 FAB 悬浮按钮动效。这是进阶功能，具体的操作案例可以看墨刀讨论区的教程进阶效果 。