页面边框显示方法及装置与流程

1.本技术涉及计算机技术领域，特别涉及一种页面边框显示方法、装置、计算机设备及存储介质。


背景技术：

2.随着手机显示屏硬件设备的不断更新升级，越来越多的视网膜(retina)屏幕使用到手机设备中。然而，retina屏幕的使用会带来如下问题：在retina屏幕中css样式中1px(像素)实际渲染对应多个物理像素点，导致css代码中1px高度的边框，在实际手机浏览器渲染时往往不止1px高度，可能是2px高度，甚至是3px高度，造成开发设计的页面边框与实际显示的页面边框存在出入，影响用户的ui(使用者界面)体验。
3.目前，针对这个问题的解决方法有通过1px高度的背景图片来设置边框，或者通过border(应用视窗四面的框架):0.5px来设置边框。然而，前者维护的成本较高，因为如果变换边框颜色，需要重新生成图片；后者则存在兼容问题，因为某此设备无法识别0.5px，导致元素无法渲染。因此，目前亟待找到一种节约维护成本且避免设备兼容问题的方法，同时减少对用户的ui体验的影响。


技术实现要素：

4.本技术的目的在于提供一种页面边框显示方法、装置、计算机设备及存储介质，用于解决相关技术的维护成本较高或存在设备兼容的技术问题。
5.本技术实施例的一个方面提供了一种页面边框显示方法，包括：获取屏幕窗口的设备像素比；利用颜色渐变设置所述屏幕窗口中的页面边框，并根据所述设备像素比设置所述颜色渐变，在所述颜色渐变的设置中，其中一种颜色设置为透明色；根据所述颜色渐变的设置显示所述边框。
6.可选地，所述根据所述设备像素比设置所述颜色渐变，包括：在所述颜色渐变的设置中，根据所述设备像素比设置起始颜色或结束颜色的渐变位置，并将其余颜色设置为透明色，其中，所述起始颜色或所述结束颜色为除透明色外的任一颜色。
7.可选地，所述根据所述设备像素比设置起始颜色或结束颜色的渐变位置，包括：获取所述设备像素比的倒数；根据所述设备像素比的倒数设置起始颜色或结束颜色的渐变位置。
8.可选地，所述根据所述设备像素比的倒数设置起始颜色或结束颜色的渐变位置，包括：将所述起始颜色或结束颜色的渐变位置设置为所述设备像素比的倒数。
9.可选地，在所述根据所述颜色渐变的设置显示所述边框之前，还包括：获取所述边框的目标高度；将所述边框对应背景图片的高度尺寸设置为所述目标高度。
10.可选地，所述根据所述设备像素比设置所述颜色渐变，包括：根据所述设备像素比通过linear-gradient()函数设置所述颜色渐变。
11.可选地，所述获取屏幕窗口的设备像素比，包括：在页面的文档对象模型元素解析
完成的情况下，通过javascript获取所述屏幕窗口的设备像素比。
12.本技术实施例的一个方面又提供了一种页面边框显示装置，包括：获取模块，用于获取屏幕窗口的设备像素比；设置模块，用于利用颜色渐变设置所述屏幕窗口中的页面边框，并根据所述设备像素比设置所述颜色渐变，在所述颜色渐变的设置中，其中一种颜色设置为透明色；显示模块，用于根据所述颜色渐变的设置显示所述边框。
13.本技术实施例的一个方面又提供了一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时用于实现上述的页面边框显示方法的步骤。
14.本技术实施例的一个方面又提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行上述的页面边框显示方法的步骤。
15.本技术实施例提供的页面边框显示方法、装置、计算机设备及存储介质，包括以下优点：
16.通过获取屏幕窗口的设备像素比，利用颜色渐变设置屏幕窗口中的页面边框，并根据设备像素比设置颜色渐变，在颜色渐变的设置中，其中一种颜色设置为透明色，根据颜色渐变的设置显示页面边框，可以通过颜色渐变及透明色的设置减少开发设计的页面边框与实际显示的页面边框之间的出入，从而减少对用户的ui体验的影响，同时相对于相关技术而言，维护的成本较低，也避免了设备兼容性的问题。
附图说明
17.图1示意性示出了本技术实施例一的页面边框显示方法的流程图；
18.图2为页面边框显示方法的一个应用示例图；
19.图3为页面边框显示方法的另一个应用示例图；
20.图4示意性示出了本技术实施例二的页面边框显示装置的框图；
21.图5示意性示出了本技术实施例三的计算机设备的硬件架构图。
具体实施方式
22.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本技术，并不用于限定本技术。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
23.需要说明的是，在本技术实施例中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本技术要求的保护范围之内。
24.在本技术的描述中，需要理解的是，步骤前的数字标号并不标识执行步骤的前后顺序，仅用于方便描述本技术及区别每一步骤，因此不能理解为对本技术的限制。
25.下面为本技术涉及的术语解释：
26.设备像素比(devicepixelratio，简称dpr)，为设备物理像素和设备独立像素的比例，即dpr＝设备物理像素/设备独立像素；其中，设备物理像素代表屏幕有多少个点，例如1080*2340表示屏幕水平方向一排有1080个物理像素点；设备逻辑像素表示屏幕展示物体的视觉尺寸，逻辑像素相同表示物体看起来或者打印出来大小一样，物理像素点越小，一个逻辑像素包含的物理像素点就越多，看起来就越清晰。
27.视网膜(retina)屏幕，是分辨率超过人眼识别极限的高分辨率屏幕，是具备足够高像素密度而使得人体肉眼无法分辨其中单独像素点的液晶屏幕。
28.linear-gradient()函数，为用于创建一个表示两种或多种颜色线性渐变图片的函数。
29.像素，为影像显示的基本单位，译自英文“pixel”，可简写为pix或px；是由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置决定该图像所呈现出来的样子。可以将像素视为整个图像中不可分割的单位或者是元素。不可分割的意思是它不能够再切割成更小单位抑或是元素，它是以一个单一颜色的小格存在。每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上所呈现的大小。
30.透明色，色彩学上指无彩色之颜色，无任何色彩表现的颜色。
31.层叠样式表(cascading style sheets，缩写css)，又称串样式列表、级联样式表、串接样式表、阶层式样式表，是一种用来为结构化文档(如html文档或xml应用)添加样式(字体、间距和颜色等)的计算机语言，由w3c定义和维护。css3现在已被大部分现代浏览器支持，而下一版的css4仍在开发中。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。css能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
32.文档对象模型(document object model，缩写dom)，是w3c组织推荐的处理可扩展置标语言和超文本标记语言的标准编程接口。
33.javascript(通常缩写为js)，是一门基于原型和头等函数的多范式高级解释型编程语言，它支持面向对象程序设计、指令式编程和函数式编程。它提供方法来操控文本、数组、日期以及正则表达式等。
34.相关技术中，通过1px高度的背景图片来设置边框的方法，由于在需要变换边框颜色时，需要重新生成背景图片，因此存在维护成本高的问题；而通过border：0.5来设置边框的方法，由于某些设备无法识别0.5px，导致这些设备上元素无法渲染，因此又会存在设备兼容性的问题。
35.本技术实施例的页面边框显示方案，可以在降低维护成本，避免设备兼容性的问题，同时可以减少对用户的ui体验的影响。
36.应当说明的是，本技术实施例的页面边框显示方法的执行主体可以为客户端或服务端，其中，客户端具体可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，服务端具体可以用独立的服务器或者多个服务器组成的服务器集群实现。
37.以下将通过若干个实施例介绍页面边框显示方案，为便于理解，下面将以服务端为执行主体进行示例性描述。
38.实施例一
39.图1示意性示出了本技术实施例一的页面边框显示方法的流程图，包括步骤s110～步骤s130，具体说明如下：
40.步骤s110，获取屏幕窗口的设备像素比。
41.屏幕窗口即页面边框所在的屏幕窗口。
42.示例性地，步骤s110可以包括：在页面的文档对象模型元素解析完成的情况下，通过javascript获取屏幕窗口的设备像素比。
43.具体地，以web页为例，可以在页面的文档对象模型(dom)元素解析完成后，通过javascript获取window.devicepixelratio参数来获取屏幕窗口的设备像素比。
44.步骤s120，利用颜色渐变设置屏幕窗口中的页面边框，并根据设备像素比设置颜色渐变，在颜色渐变的设置中，其中一种颜色设置为透明色。
45.示例性地，步骤s120可以包括：根据设备像素比通过linear-gradient()函数设置页面边框的颜色渐变。
46.可选地，在根据设备像素比设置页面边框的颜色渐变时，可以将其中一种颜色设置为想要的颜色(可称为目标颜色)，另一种颜色设置为透明色。可以理解的是，由于透明色的存在，因此在实际显示时目标颜色只会占背景图片对应高度的一部分而非全部，这样可以使边框实际显示的高度(效果)小于未进行渐变设置的边框的高度。
47.例如，若设备像素比为2，目标颜色为红色，在未进行颜色渐变设置时，1px高度的边框在实际显示时的高度为2px高度；若进行上述颜色渐变的设置，则红色只会占显示高度的一部分(其余高度部分为透明色)，红色在实际显示时的高度就会小于2px高度，从而在视觉上使边框显示的高度小于2px高度，使其与开发设计页面需要的高度相接近。
48.又例如，若设备像素比为3，目标颜色为蓝色，在未进行颜色渐变设置时，1px高度的边框在实际显示时的高度为3px高度；若进行上述颜色渐变的设置，则蓝色只会占显示高度的一部分(一部分高度为透明色)，蓝色在实际显示时高度就会小于3px高度，从而在视觉上使边框显示的高度小于3px高度，使其与开发设计页面需要的高度相接近。
49.而在根据设备像素比设置屏幕窗口中页面边框的颜色渐变时，可以根据设备像素比确定颜色渐变使用的颜色总数(包括透明色)及颜色的位置或组合等因素，具体如何确定可以根据实际需要设置，此处不做限制。例如，在设备像素比为2时，可以确定颜色总数为2，一种是目标颜色，一种是透明色；在设备像素比为3，也可以确定颜色总数为2，不过组合是透明色、目标颜色和透明色，即将目标颜色放在渐变颜色的中间，等等。
50.在示例性的实施例中，步骤s120可以包括：在颜色渐变的设置中，根据设备像素比设置起始颜色或结束颜色的渐变位置，并将其余颜色设置为透明色，其中，起始颜色或结束颜色为除透明色外的任一颜色。
51.即：将起始颜色或结束颜色设置为目标颜色，其余颜色设置为透明色，并根据设备像素比设置起始颜色或结束颜色的渐变位置。
52.可以理解的是，根据设备像素比设置起始颜色或结束颜色的渐变位置，通过合理的设置，可以使颜色渐变与设备像素比相适应，从而减少开发设计的页面边框与实际显示的页面边框之间的出入。
53.示例性地，上述“根据设备像素比设置起始颜色或结束颜色的渐变位置”还可以包
括：获取设备像素比的倒数，根据设备像素比的倒数设置起始颜色或结束颜色的渐变位置。
54.其中，获取设备像素比的倒数即计算设备像素比的倒数，由于设备像素比已知，则直接计算可以得到设备像素比的倒数；例如，若设备像素比为2，则计算可得其倒数为0.5。linear-gradient()函数第一个参数指定渐变的方向或角度，后面的参数指的是渐变的颜色以及颜色起点和终点位置(第一个颜色可以省略起点位置，最后一个颜色可以省略终点位置)。上述根据设备像素比的倒数设置起始颜色或结束颜色的渐变位置中，若目标颜色为起始颜色，则是指设置起始颜色的渐变终点位置；若目标颜色为结束颜色，则是指设置结束颜色的渐变起点位置。
55.可选地，上述“根据设备像素比的倒数设置起始颜色或结束颜色的渐变位置”可以包括：将起始颜色或结束颜色的渐变位置设置为设备像素比的倒数。
56.例如，若设备像素比的倒数为0.5(dpr为2)，则将起始颜色或结束颜色的渐变位置设置为0.5(50％)；若设备像素比的倒数为0.33(dpr为3)，则将起始颜色或结束颜色的渐变位置设置为0.33(33％)。
57.可以理解的是，通过将起始颜色或结束颜色的渐变位置设置为设备像素比的倒数，可以使页面边框的实际显示效果与开发设计相符，进一步减少对用户ui体验的影响。
58.当然，根据设备像素比的倒数设置起始颜色或结束颜色的渐变位置还可以在设备像素比的倒数的基础上进行一定比例或预设值的调整或修正，再在调整或修正的基础上设置起始颜色或结束颜色的渐变位置。例如，若设备像素比的倒数为0.5，则可以将起始颜色或结束颜色的渐变位置设置为在其基础上减去0.1得到0.4(40％)。
59.步骤s130，根据颜色渐变的设置显示边框。
60.在示例性的实施例中，在步骤s130之前，还可以包括：获取页面边框的目标高度，根据页面边框对应背景图片的高度尺寸设置为目标高度。
61.其中，背景图片的高度尺寸可以通过background-size进行设置。页面边框的目标高度可以由用户输入，具体的高度可以根据实际需要进行设置，此处不做限制。
62.例如，若目标高度为1px高度，则可以将页面边框对应背景图片的高度尺寸设置为1px高度。
63.在设备像素比为2的情况下，将起始颜色或结束颜色的渐变位置设置为0.5(50％)，则此时目标颜色实际显示时占背景图片对应高度的一半，最终显示的效果为边框显示的高度为2px高度的一半，为1px高度，从而使边框实际显示的高度效果与开发设计的高度相符。请参考图2，其为页面边框显示方法的一个应用示例图。如图所示，在设备像素比为2的情况下，不做处理的1px高度的边框，实际显示为2px高度的边框；而通过颜色渐变的设置及背景图片的高度尺寸的设置后，其呈现的效果为1px高度的边框。示例性地，其相应的background-size可以设置为如下：
64.background：-webkit-linear-gradient(bottom，red 50％,transparent 50％)center bottom/100％1pxno-repeat。
65.在设备像素比为3的情况下，将起始颜色或结束颜色的渐变位置设置为0.33(33％)，则此时目标颜色实际显示时占背景图片对应高度的1/3，最终显示的效果为边框显示的高度为3px的1/3，为1px高度，从而使边框实际显示的高度效果与开发设计的高度相符。请参考图3，其为页面边框显示方法的另一个应用示例图。如图所示，在设备像素比为3
的情况下，不做处理的1px高度的边框，实际显示为3px高度的边框；而通过颜色渐变的设置及背景图片的高度尺寸的设置后，其呈现的效果为1px高度的边框。示例性地，其相应的background-size可以设置为如下：
66.background：-webkit-linear-gradient(bottom，red 33％,transparent 33％)center bottom/100％1px no-repeat。
67.应当说明的是，上述100％表示完全填满边框对应的区域，实际应用中也可以调整上式中的100％，将其修改为其它比例。相应地，1px的高度也可以设置为与其它比例相适应，也可以使实际显示的高度与开发设计想要的高度一致。例如，可以将100％改为50％，则1px可以相应调整为2px，如此也可以使实际显示的高度为1px。当然，将1px调整为2px，则会使边框实际占用的高度由原来的1px变为2px，因此优选地，仍是将边框对应背景图片的高度尺寸设置为目标高度，比例默认为100％。
68.可以理解的是，相关技术中，通过1px高度的背景图片来设置边框，在需要变换边框颜色时，需要重新生成背景图片，维护的成本较高；而本技术实施例的页面边框显示方法，若需要变换边框颜色，则直接修改颜色渐变中的颜色即可，维护的成本较低。而通过border：0.5的方式来设置边框的相关技术，由于某此设备无法识别0.5px，因此会导致元素无法渲染，会存在设备兼容性的问题；而本技术实施例的页面边框显示方法，则不会存在无法识别的问题，因此不存在设备兼容性的问题。
69.本技术实施例的页面边框显示方法，通过获取屏幕窗口的设备像素比，利用颜色渐变设置屏幕窗口中的页面边框，并根据设备像素比设置颜色渐变，在颜色渐变的设置中，其中一种颜色设置为透明色，根据颜色渐变的设置显示页面边框，可以通过颜色渐变及透明色的设置减少开发设计的页面边框与实际显示的页面边框之间的出入，从而减少对用户的ui体验的影响，同时相对于相关技术而言，维护的成本较低，也避免了设备兼容性的问题。
70.实施例二
71.图4示意性示出了根据本技术实施例二的页面边框显示装置200的框图，该页面边框显示装置200可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本技术实施例。本技术实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本实施例中各程序模块的功能。
72.如图4所示，该页面边框显示装置200可以包括获取模块210、设置模块220和显示模块230。
73.获取模块210，用于获取屏幕窗口的设备像素比；
74.设置模块220，用于利用颜色渐变设置屏幕窗口中的页面边框，并根据设备像素比设置颜色渐变，在颜色渐变的设置中，其中一种颜色设置为透明色；
75.显示模块230，用于根据颜色渐变的设置显示边框。
76.在示例性的实施例中，设置模块220还用于：在颜色渐变的设置中，根据设备像素比设置起始颜色或结束颜色的渐变位置，并将其余颜色设置为透明色，其中，所述起始颜色或所述结束颜色为除透明色外的任一颜色。
77.在示例性的实施例中，设置模块220还用于：获取所述设备像素比的倒数；根据所
述设备像素比的倒数设置起始颜色或结束颜色的渐变位置。
78.在示例性的实施例中，设置模块220还用于：将所述起始颜色或结束颜色的渐变位置设置为所述设备像素比的倒数。
79.在示例性的实施例中，页面边框显示装置200还可以包括尺寸设置模块(图中未示出)，其中，尺寸设置模块用于：获取所述边框的目标高度；将所述边框对应背景图片的高度尺寸设置为所述目标高度。
80.在示例性的实施例中，设置模块220还用于：根据所述设备像素比通过linear-gradient()函数设置所述颜色渐变。
81.在示例性的实施例中，获取模块210还用于：在页面的文档对象模型元素解析完成的情况下，通过javascript获取所述屏幕窗口的设备像素比。
82.实施例三
83.图5示意性示出了根据本技术实施例三的适于页面边框显示方法的计算机设备300的硬件架构图。计算机设备300可以是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或数据处理的设备。例如，可以是机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)、网关等。如图5所示，计算机设备300至少包括但不限于：可通过系统总线相互通信链接存储器310、处理器320、网络接口330。其中：
84.存储器310至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、随机访问存储器(ram)、静态随机访问存储器(sram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、可编程只读存储器(prom)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器310可以是计算机设备300的内部存储模块，例如该计算机设备300的硬盘或内存。在另一些实施例中，存储器310也可以是计算机设备300的外部存储设备，例如该计算机设备300上配备的插接式硬盘，智能存储卡(smart media card，简称为smc)，安全数字(secure digital，简称为sd)卡，闪存卡(flash card)等。当然，存储器310还可以既包括计算机设备300的内部存储模块也包括其外部存储设备。本实施例中，存储器310通常用于存储安装于计算机设备300的操作系统和各类应用软件，例如页面边框显示方法的程序代码等。此外，存储器310还可以用于暂时地存储已经输出或者将要输出的各类数据。
85.处理器320在一些实施例中可以是中央处理器(central processing unit，简称为cpu)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器320通常用于控制计算机设备300的总体操作，例如执行与计算机设备300进行数据交互或者通信相关的控制和处理等。本实施例中，处理器320用于运行存储器310中存储的程序代码或者处理数据。
86.网络接口330可包括无线网络接口或有线网络接口，该网络接口330通常用于在计算机设备300与其他计算机设备之间建立通信链接。例如，网络接口330用于通过网络将计算机设备300与外部终端相连，在计算机设备300与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(intranet)、互联网(internet)、全球移动通信系统(global system of mobile communication，简称为gsm)、宽带码分多址(wideband code division multiple access，简称为wcdma)、4g网络、5g网络、蓝牙(bluetooth)、wi-fi等无线或有线网络。
87.需要指出的是，图5仅示出了具有部件310-330的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。
88.在本实施例中，存储于存储器310中的页面边框显示方法还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器320)所执行，以完成本技术实施例。
89.实施例四
90.本技术实施例还提供一种计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现实施例中的页面边框显示方法的步骤。
91.本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、随机访问存储器(ram)、静态随机访问存储器(sram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、可编程只读存储器(prom)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(smart media card，简称为smc)，安全数字(secure digital，简称为sd)卡，闪存卡(flash card)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例中页面边框显示方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。
92.显然，本领域的技术人员应该明白，上述的本技术实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本技术实施例不限制于任何特定的硬件和软件结合。
93.以上仅为本技术的优选实施例，并非因此限制本技术的专利范围，凡是利用本技术说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本技术的专利保护范围内。

技术特征：
1.一种页面边框显示方法，其特征在于，包括：获取屏幕窗口的设备像素比；利用颜色渐变设置所述屏幕窗口中的页面边框，并根据所述设备像素比设置所述颜色渐变，在所述颜色渐变的设置中，其中一种颜色设置为透明色；根据所述颜色渐变的设置显示所述边框。2.根据权利要求1所述的页面边框显示方法，其特征在于，所述根据所述设备像素比设置所述颜色渐变，包括：在所述颜色渐变的设置中，根据所述设备像素比设置起始颜色或结束颜色的渐变位置，并将其余颜色设置为透明色，其中，所述起始颜色或所述结束颜色为除透明色外的任一颜色。3.根据权利要求2所述的页面边框显示方法，其特征在于，所述根据所述设备像素比设置起始颜色或结束颜色的渐变位置，包括：获取所述设备像素比的倒数；根据所述设备像素比的倒数设置起始颜色或结束颜色的渐变位置。4.根据权利要求3所述的页面边框显示方法，其特征在于，所述根据所述设备像素比的倒数设置起始颜色或结束颜色的渐变位置，包括：将所述起始颜色或结束颜色的渐变位置设置为所述设备像素比的倒数。5.根据权利要求1-4任一项所述的页面边框显示方法，其特征在于，在所述根据所述颜色渐变的设置显示所述边框之前，还包括：获取所述边框的目标高度；将所述边框对应背景图片的高度尺寸设置为所述目标高度。6.根据权利要求1-4任一项所述的页面边框显示方法，其特征在于，所述根据所述设备像素比设置所述颜色渐变，包括：根据所述设备像素比通过linear-gradient()函数设置所述颜色渐变。7.根据权利要求1-4任一项所述的页面边框显示方法，其特征在于，所述获取屏幕窗口的设备像素比，包括：在页面的文档对象模型元素解析完成的情况下，通过javascript获取所述屏幕窗口的设备像素比。8.一种页面边框显示装置，其特征在于，包括：获取模块，用于获取屏幕窗口的设备像素比；设置模块，用于利用颜色渐变设置所述屏幕窗口中的页面边框，并根据所述设备像素比设置所述颜色渐变，在所述颜色渐变的设置中，其中一种颜色设置为透明色；显示模块，用于根据所述颜色渐变的设置显示所述边框。9.一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时用于实现权利要求1至7中任一项所述的页面边框显示方法的步骤。10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行权利要求1至7中任一项所述的页面边框显示方法的步骤。

技术总结
本申请实施例提供一种页面边框显示方法，所述方法包括：获取屏幕窗口的设备像素比；利用颜色渐变设置所述屏幕窗口中的页面边框，并根据所述设备像素比设置所述颜色渐变，在所述颜色渐变的设置中，其中一种颜色设置为透明色；根据所述颜色渐变的设置显示所述边框。本申请实施例提供的页面边框显示方法，可以减少开发设计的页面边框和实际显示的页面边框之间的出入，减少对用户的UI体验的影响，相对于相关技术而言，维护的成本较低，也可以避免设备兼容性的问题。备兼容性的问题。备兼容性的问题。


技术研发人员：龚张
受保护的技术使用者：上海幻电信息科技有限公司
技术研发日：2023.07.19
技术公布日：2023/10/11