How to make a 0.5 pixel line in css

This time I will show you how to make a 0.5 pixel line with css. What are the precautions for making a 0.5 pixel line with css? The following is a practical case, let’s take a look.

The company’s designers use iPhone 6 (width is 750 physical pixels) as the benchmark when making design drawings. The device pixel ratio of iPhone 6 (that is, the ratio of CSS pixels to physical pixels) is 2, so when the designer designs a box with a border of 1px, it is 0.5 pixels relative to the CSS code.

For this problem, the most intuitive way is to directly set the border to 0.5px with css. After testing, the iPhone can display it normally.

androidAlmost all browsers will recognize 0.5 as 0 , that is, borderless state, so this method does not work

CSS3 has a zoom attribute. We can use this attribute to reduce the 1px border by 50% to achieve this function. The specific implementation code is as follows

<p class="border3">
    <p class="content">伪类设置的边框</p>
</p>

css:

.border3{
     position: relative;          
 }
 
.border3:before{
       content: '';
       position: absolute;
       width: 200%;
       height: 200%;
       border: 1px solid red;
       -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
       -ms-transform-origin: 0 0;
       -o-transform-origin: 0 0;
       transform-origin: 0 0;
       -webkit-transform: scale(0.5, 0.5);
       -ms-transform: scale(0.5, 0.5);
       -o-transform: scale(0.5, 0.5);
       transform: scale(0.5, 0.5);
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
}

Implementation ideas:

1. Set the reference position of the target element

2. Add a pseudo element before or after to the target element. And set

absolute positioning

3. Add a 1px border to the pseudo element

4. Use the box-sizing: border-box attribute to wrap the border into the width and height Inside

5, set the width and height to 200%

6, reduce the entire

box model to 0.5

7, adjust the position of the box model, Taking the upper left corner as the benchmark transform-origin: 0 0;

The implementation result is displayed on the iPhone as follows:

I believe you have mastered the method after reading the case in this article , for more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of pointer-events in css3

Detailed explanation of the use of focus-within

The above is the detailed content of How to make a 0.5 pixel line in css. For more information, please follow other related articles on the PHP Chinese website!