So erstellen Sie in CSS3 eine dünne Linie mit weniger als einem Pixel

Dieses Mal zeige ich Ihnen, wie Sie in CSS3 dünne Linien mit weniger als einem Pixel erstellen Schauen Sie mal rein. CSS3 in Webapp implementiert 0,5 Pixel dünne Linien

Es fühlt sich an, als hätte ich schon lange nicht mehr gebloggt, also muss ich wieder mit dem Schreiben beginnen ist es, ein paar Aufzeichnungen zu machen, weil ich Angst habe, dass ich es eines Tages vergesse, auf den Blog zurückblicke und es wieder aufnehme. Erinnerung, das war's.

Ich habe E-Commerce-Websites für Mobilgeräte wie Taobao, JD.com, Yixun, Yihaodian usw. gesehen. Die gemeinsamen Merkmale dieser großen E-Commerce-Websites sind hervorragende Verarbeitung und gute Benutzererfahrung Was das Layout betrifft, sieht eine 0,5-Pixel-Linie viel raffinierter aus als eine 1-Pixel-Linie.

Methode 1: Verwenden Sie Farbverläufe, um

HTML-Code:

CSS-Code:

<p></p>

Be Vorsicht! Beachten Sie, dass sich hier eine Grube befindet! ! ! :

.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%);
}

Für die Kompatibilität mit verschiedenen Browsern müssen wir unterschiedliche Präfixe verwenden, wie zum Beispiel:

Die Gefahr liegt in diesen Präfixen: Wir ändern die Höhe 1px im Code auf 100px, Parameter Identisch mit

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

und verwenden Sie zum Testen die neueste Version von Chrome.

0deg, transparent 50%, #e0e0e0 50%linear-gradient hat die folgenden Ergebnisse:

Nach einer Reihe von Testzusammenfassungen können wir die folgende Gradientenmethode ableiten:

Das Code-Rendering von webkit-linear-gradient lautet wie folgt:

Nach der Zusammenfassung sehen wir, dass die Gradientenmethode das Präfix -webkit hat ist:

Wenn andere Präfixe verwendet werden, sind Freunde eingeladen, selbst zu versuchen, die Gruben auszufüllen!

Hinweis:

Diese Schreibweise wird empfohlen, dies ist der Ansatz der Baidu Nuomi-Mobilstation (sofern nicht überarbeitet): http://m.nuomi.com/, von In der Beschreibung des obigen Codes können Sie sehen, dass, um den Effekt des Pseudocodes von 0,5 Pixel am oberen Rand der Box zu erzielen:

, nachher als Haken verwendet wird, Breite 100 %, Höhe 1 Pixel, Hintergrund Farbverlauf, halb transparent, halb farbig, so wird es gemacht, OK. Ebenso sind die dünnen Linien unten, links und rechts alle gleich. Wenn Sie es in Kombination verwenden müssen, ist natürlich auch eine Verschachtelung zwischen Boxen möglich, oder Sie haben Ihre eigenen Ideen (natürlich gibt es viele Möglichkeiten, dies zu tun!) ...

border-top：0.5px solid #e0e0e0;

Methode 2: Zoom verwenden

HTML-Code:

CSS-Code:

<p></p>

Erklärung

.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);
}

So erreichen Sie das 0,5-Pixel-Rand auf der Box, nein. Dieser Ansatz wird dringend empfohlen, da einige mobile Browser nach dem Testen nicht sehr gut angezeigt werden. Das Prinzip dieser Implementierung besteht darin, in Richtung der Y-Achse die Hälfte zu komprimieren. Wie oben erwähnt.

Wenn Sie der Meinung sind, dass der Effekt nicht sehr gut ist, finden Sie hier einen Ausweg oder eine Problemumgehung: Es handelt sich um die oben auskommentierte Methode: Sie können versuchen,

anstelle von Hintergrundfarbe zu verwenden, was JD.com vorschlägt funktioniert (falls nicht, wenn überarbeitet): http://m.jd.com/
border-top:1px solid #e0e0e0;

Erweiterung von Methode zwei: Wenn Sie rundum 0,5 Pixel große Linien erreichen möchten:

HTML-Code:

CSS-Code:

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

Beschreibung:

  .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);
 }

So erreichen Sie 0,5 Pixel um ein Feld herum. Radius-Effekt mit abgerundeten Ecken: Sie werden feststellen, dass einige Mobiltelefone abgerundete Ecken haben, die Auswirkung ist jedoch nicht groß. Wenn es zwei Kästchen gibt, hat das obere Kästchen keinen Randeffekt und das untere Kästchen hat die gleiche Breite und die Ober- und Unterseite sind manchmal nicht ausgerichtet Mobiltelefon ... sie sind um 0,5 Pixel gestaffelt, der Grund ist bereits sehr klar ... und dass

je nach Bedarf angepasst und verwendet werden kann, ist es in Ordnung, es nicht zu verwenden.

z-index

Methode 3: Verwenden Sie Hintergrundbild und CSS3-Neunquadrat-Rasterzuschnitt

京东之前是这么做的，现在已经不被使用了。具体做法，请看下面demo结构：

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

在test.html 中 有如下关键代码：

html 结构：

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

css 结构：

.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;
}

而 pic.png 的九宫格切法，如下图：

具体有关 border-image 的用法，网上有很多：

w3c 上的这个讲的不是很具体：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);
}

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

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎么用CSS设置记录用户密码

实现卡片3D翻转效果

Das obige ist der detaillierte Inhalt vonSo erstellen Sie in CSS3 eine dünne Linie mit weniger als einem Pixel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!