Sharing examples of making 0.5px thin lines in css3

This article mainly introduces the relevant information about the sample code of using css3 to make a 0.5px thin line. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

CSS3 in Webapp implements 0.5px thin lines

It feels like I haven’t written a blog for a long time. My life has been relatively stable recently and I am living a fulfilling life. , so I have to start writing something again. One is to make some records, and I am afraid that one day I will forget it. If I look back at the blog, I will pick it up again. Memory, that's it.

I have seen e-commerce mobile websites such as Taobao, JD.com, Yixun, Yihaodian, etc. The common features of these large e-commerce sites are exquisite workmanship and good user experience. Among them, in terms of layout , a 0.5px line looks much more refined than a 1px line.

Method 1: Use gradients to do

html code:

##

<p></p>

css code:

.bd-t{
  position:relative;
}

.bd-t::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%);
}

Be careful! Note that there are pitfalls here! ! ! : <p></p>For compatibility with different browsers, we need to use different prefixes such as: <p></p>

-webkit-linear-gradient
-ms-linear-gradient 
-o-linear-gradient

The pitfall is in these prefixes: We put the height 1px becomes 100px, the parameters are the same as

0deg, transparent 50%, #e0e0e0 50% and use the latest version of chrome to test.

linear-gradient has the following results: <p></p>

After a series of test summaries, we can deduce the following gradient method: <p></p>

The code rendering of webkit-linear-gradient is as follows: <p></p>

After summary, we see that the gradient method of -webkit prefix is:<p></p>

If other prefixes are used, friends are invited to try to fill in the pits themselves! <p></p>Note: <p></p>Recommended this way of writing, this is the approach of Baidu Nuomi Mobile Station (if it has not been revised): http://m.nuomi.com/, from the description of the above code , you can see that in order to achieve the effect of the pseudo code of 0.5px border on the top of the box:

border-top: 0.5px solid #e0e0e0;, use after as a hook, width 100%, height 1px, The background gradient, half transparent and half colored, is ok. In the same way, the thin lines on the bottom, left and right are all the same. Of course, if you need to use it in combination, nesting between boxes is also possible, or you have your own ideas (of course there are many ways to do it!)...

Method 2: Use zoom

html code: <p></p>

<p></p>

css code: <p></p>

##

.bd-t{
  position:relative;
}

.bd-t:after{
  content: "  ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: #e0e0e0;
  /* 如果不用 background-color, 使用 border-top:1px solid #e0e0e0; */
  -webkit-transform: scaleY(.5);
  transform:scaleY(.5);
}

Description

This is an approach to achieve a 0.5px border on the box. This approach is not recommended because after testing, some mobile browsers do not display very well. The principle of this implementation is: in the Y-axis direction, compress half. As noted above.

If you feel that the effect is not very good, here is a fallback or workaround, whatsoever: It is the method commented out above: you can try using

border-top:1px solid #e0e0e0;
instead of background- This is how JD.com does color (if it has not been revised): http://m.jd.com/

Expansion of method two: If you want to achieve 0.5px lines all around Words:

html code:

<p></p>

<p class=&#39;bd-all&#39;></p>

css code:

<p></p>

  .bd-all{
      position:relative;
  }

 .bd-all:after{
      content: "  ";
      position: absolute;
      left: 0;
      top: 0;
      z-index:-1;
      width: 200%;
      height:200%;
      border:1px solid #e0e0e0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scale(.5, .5);
      transform: scale(.5, .5);
 }

Description :

This is how to achieve 0.5px around a box. If you add the border-radius rounded corner effect, you will find that some mobile phones will have rounded corners, but the impact is not great. If there are two boxes, the upper box has no border effect, and the lower box has a border effect. The two boxes are the same width and the top and bottom are together. You will find that sometimes they are not aligned on the mobile phone... they are staggered by 0.5px. , the reason is already very clear... and the

z-index

can be adjusted according to different needs. If possible, it is okay not to use it.

Method 3: Using background-image and css3 nine-square grid cutting

Jingdong did this before, but it is no longer used. For the specific method, please see the demo structure below:

<p></p>

├─demo/ ························ demo 目录
        └─┬─ test.html  ··············· test.html 文件
        └─── pic.png ·················· png 图片文件

There are the following key codes in test.html:

html Structure:

<p class="bd-t"></p>

css structure:

<p></p>

.bd-t{
   position: relative;
}
.bd-t::after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
border-top: 1px solid transparent;
/* 下面用 stretch 和 round 都可以 */
border-image: url('pic.png') 2 1 1 1 stretch; 
-webkit-border-image: url('pic.png') 2 1 1 1 stretch;
}

And the nine-square grid cutting method of pic.png is as shown below:

<p></p>

There are many specific usages of border-image on the Internet:

This one on w3c is not very specific: http://www.jb51.net/w3school/cssref/pr_border- image.htm

在 MDN 上 有明确的介绍，并且有很多配图，包括兼容性等等：https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

但是不推荐这种写法，毕竟图片质量比较大，能用代码解决的，不用图片。在这里border-width 是 1px , 但是 背景是有2px的距离，所以在1px的border-top上，显示出有颜色的高度就是0.5px, 同理，底边，左边和右边的0.5px，也都很容易实现。 这个就是css3的魅力体现(这个现在兼容性也不是很好，在一些较低端的安卓浏览器和一些版本的safari 支持的也不是很好)。

方式四 (推荐)： weui的实现方式 :

这是一款微信团队开发的UI 组件 详情见： weui , 它的使用方式是这样的：

 

.weui-cell:before{
   content: " ";
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   height: 1px;
   border-top: 1px solid #D9D9D9;
   color: #D9D9D9;
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
}

方式五： 使用同周边相似的浅色，利用视觉效果，让用户产生错觉

这个就考验设计师的功力了 ：)

其他说明：不是很推荐使用渐变来做 , 在移动设备上可以看到，但在一些浏览器上看不到，不便于调试。

相关推荐：

css3实现冲击波效果

css3绘制一个圆圆的loading转圈动画实例分享

CSS3中transform功能

The above is the detailed content of Sharing examples of making 0.5px thin lines in css3. For more information, please follow other related articles on the PHP Chinese website!