Home >Web Front-end >CSS Tutorial >Introduction to the method of drawing 0.5 pixels on the front-end page

Introduction to the method of drawing 0.5 pixels on the front-end page

巴扎黑Original: 2017-08-12 15:04:581794browse

This article mainly introduces several methods for drawing 0.5 pixels on the Web front-end, which are implemented by using meta viewport, border-image, background-image and transform: scale(). Friends who need it can refer to it

Recently completed the mobile web touch screen development arranged by the company, which involved displaying lines on mobile devices. At first, the css board attribute commonly used on PCs was used to display 1-pixel lines, but it was found that it did not work on mobile devices. It’s not beautiful. Referring to the touch screens of Taobao and JD.com, we found that they all use shallow and thin lines to display on mobile devices.

The following records four more convenient ways to draw 0.5 pixel lines

1. Use the meta viewport method, which is also the method used by Taobao touch screen

Commonly used mobile html viewport settings are as follows

0028de0eb0f2df70276d6fe77b7b4880
I won’t mention the specific meaning. It is to make the height and width of the page equal to the height and width of the device in pixels. In order to facilitate the drawing of a 0.5 pixel viewport, the settings are as follows

31fb3175acbfcc4df439bfc8506905d7
The width and height of html are 2 times the size of the device. If the css board is still used at this time to be 1 pixel, the page lines seen by the naked eye are equivalent to the effect of transform:scale(0.5), which is 0.5 pixels

But this method involves the page The overall layout planning and image size production, so if you use this method, it is better to determine it in advance

2. Use the border-image method

This is actually relatively simple Now, just create a picture of a 0.5 pixel line and its matching background color

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <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>
    <p>
        <p>点击1</p>
        <p>点击2</p>
    </p>
</html>

3. Use the background-image method

What I use here is the linear-gradient method of gradient color. The code is as follows

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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>
    <p>
        <p>点击1</p>
        <p>点击2</p>
    </p>
</body>
</html>

linear-gradient(bottom,red 50%, transparent 50%); means to draw a gradient color from the bottom, the color is red, the proportion is 50%, and the total width has been set to 100% and the total height is one pixel background-size: 100% 1px;

This will display a line of 0.5 pixels

4. Use the transform: scale() method

It is the height of the drawn line To perform half-time scaling, the code is as follows

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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: &#39;&#39;;
                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>
    <p>
        <p>点击1</p>
        <p>点击2</p>
    </p>
</body>
</html>

The above is the detailed content of Introduction to the method of drawing 0.5 pixels on the front-end page. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css3 box-shadow shadow graphic tutorialNext article：css3 box-shadow shadow graphic tutorial

See more

Introduction to the method of drawing 0.5 pixels on the front-end page

Related articles