Web前端开发绘图0.5像素的几种方式

日期：2021-03-18 类型：科技新闻我要分享

关键词：通道抠图，怎么在图片上编辑文字，创客贴作图神器，免费图片设计制作在线，背景透明图制作

近期进行了企业分配的挪动web触摸屏开发设计，期内涉及到到在挪动机器设备上显示信息线条，最初选用PC常见的css board特性来显示信息1个像素的线条，可是发如今挪动机器设备上其实不美观大方，参照淘宝、京东的触摸屏发现它们均是选用浅细的线条来显示信息在挪动机器设备上。

　　下列记录了较为便捷的4种绘图0.5像素线条方法

1、选用meta viewport的方法，这个也是淘宝触摸屏选用的方法

常见的挪动html viewport的设定以下

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
实际意思就很少提，它便是让网页页面的高宽度即为机器设备的高宽像素，而以便便捷绘图0.5像素的viewport的设定以下

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />
这样html的宽高便是机器设备的2倍，此时仍然应用css board为1像素的话，肉眼看到网页页面线条就非常于transform:scale(0.5)的实际效果，即为0.5像素

可是这类方法涉及到到网页页面总体合理布局整体规划和照片尺寸的制做，因此若选用这个方法還是事前明确为好

2、选用 border-image的方法

这个实际上就较为简易了，立即制做1个0.5像素的线条和其配搭应用的情况色的照片便可

<!DOCTYPE html>
<head>
    <meta charset="utf⑻">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>boardTest</title>
    <style>
            p{
                margin: 50px auto;
                padding: 5px 10px 5px 10px;
                color: red;
                text-align: center;
                width: 60px;
            }
            p:first-child{
                border-bottom: 1px solid red;
            }
            p:last-child{
                border-width: 0 0 1px 0; border-image: url("img/line_h.gif") 2 0 round;
            }
    </style>
<body>
    <div>
        <p>点一下1</p>
        <p>点一下2</p>
    </div>
</html>

3、选用background-image的方法

我这里选用的是渐变色色linear-gradient的方法，编码以下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf⑻">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>boardTest</title>
    <style>
            p{
                margin: 50px auto;
                padding: 5px 10px 5px 10px;
                color: red;
                text-align: center;
                width: 60px;
            }
            p:first-child{
                border-bottom: 1px solid red;
            }
            p:last-child{
                background-image: -webkit-linear-gradient(bottom,red 50%,transparent 50%);
                background-image: linear-gradient(bottom,red 50%,transparent 50%);
                background-size:  100% 1px;
                background-repeat: no-repeat;
                background-position: bottom right;     
    </style>
</head>
<body>
    <div>
        <p>点一下1</p>
        <p>点一下2</p>
    </div>
</body>
</html>

linear-gradient(bottom,red 50%,transparent 50%);的意思是从底部绘图1个渐变色色，色调为鲜红色，占有率为50%，而总宽度早已设定为100%而总高宽比为1个像素background-size: 100% 1px；

这样显示信息出来便是0.5像素的线条

4、选用transform: scale()的方法

便是将绘图出来的线条的高宽比开展半倍的放缩，编码以下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf⑻">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>boardTest</title>
    <style>
            p{
                margin: 50px auto;
                padding: 5px 10px 5px 10px;
                color: red;
                text-align: center;
                width: 60px;
            }
            p:first-child{
                border-bottom: 1px solid red;
            }
            p:last-child{
                position: relative;
            }
            p:last-child:after {
                position: absolute;
                content: '';
                width: 100%;
                left: 0;
                bottom: 0;
                height: 1px;
                background-color: red;
                -webkit-transform: scale(1,0.5);
                transform: scale(1,0.5);
                -webkit-transform-origin: center bottom;
                transform-origin: center bottom
            }
        
    </style>
</head>
<body>
    <div>
        <p>点一下1</p>
        <p>点一下2</p>
    </div>
</body>
</html>

以上便是网编为大伙儿梳理出来的Web前端开发绘图0.5像素的几种方式，期待对大伙儿的学习培训可以起到协助~

上一篇：电子商务新闻资讯返回下一篇：没有了