如何使用css3做0.5px的細(xì)線

這篇文章給大家分享的是有關(guān)如何使用css3做0.5px的細(xì)線的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

Webapp中的CSS3實(shí)現(xiàn) 0.5px的細(xì)線

感覺很長時(shí)間沒寫過博客了，最近生活還算穩(wěn)定，過得較為充實(shí)，所以又要開始寫寫東西了，一個(gè)是為了做些記錄，是怕自己某一天，忘記了，回頭翻翻博客，就會(huì)再次的拾起來，記憶，就是這樣。

曾看過淘寶，京東，易迅，一號(hào)店等等電商的移動(dòng)端網(wǎng)站，這些大的電商站的共同特點(diǎn)是做的精致，用戶體驗(yàn)良好，其中在布局方面 ， 0.5px的線看上去就比1px的線看上去要精致很多。

方法一：使用漸變來做

html代碼：

<div></div>

css代碼：

.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 ! 注意此處有坑?。。。?/p>

對(duì)于不同瀏覽器的兼容，我們需要使用不同的前綴如：

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

坑就在這些前綴里： 我們把代碼里的height 1px 變成 100px , 參數(shù)同為 0deg, transparent 50%, #e0e0e0 50% 并使用最新版的chrome來測(cè)試 。

linear-gradient 有如下結(jié)果：

經(jīng)過一系列的測(cè)試總結(jié)，我們可以推理出下面的漸變方式：

webkit-linear-gradient 的代碼效果圖如下：

經(jīng)總結(jié)，我們看到-webkit前綴的漸變方式為：

其他的前綴如果用到，還請(qǐng)小伙伴們自己來嘗試填坑！

說明：

推薦這種寫法，這是百度糯米移動(dòng)站的做法(如果沒改版的話)：http://m.nuomi.com/ ，從上述代碼的描述中，可以看到，為了實(shí)現(xiàn)盒子頂部邊框0.5px的偽代碼：border-top：0.5px solid #e0e0e0; 的效果，使用after，作為一個(gè)鉤子，寬度100%，高度1px,背景漸變，一半透明，一半有顏色，這么干是可以的。同理，底部，左邊和右邊的細(xì)線，都是同一個(gè)道理了。當(dāng)然，如果需要組合使用，盒子之間的嵌套使用，也是可以的，或者你有自己的想法(當(dāng)然做法有很多種！)…

方式二： 使用縮放

html代碼：

<div></div>

css代碼：

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

說明

這是實(shí)現(xiàn)盒子上邊框0.5px的做法， 不是很推薦這種做法，因?yàn)榻?jīng)過測(cè)試，一些手機(jī)端瀏覽器顯示的不是太好。這種實(shí)現(xiàn)的原理是： 在Y軸方向上，壓縮一半。就像上面注釋的那樣。
如果你覺得效果不太好，這里有一個(gè) fallback or workaround， whatsoever： 就是上面注釋掉的那種做法：可以嘗試使用border-top:1px solid #e0e0e0; 代替background-color的做法，京東就是這么做的(如果沒改版的話)： http://m.jd.com/

方式二的拓展 : 如果要實(shí)現(xiàn)四周全是0.5px的線條的話 ：

html代碼：

<div class='bd-all'></div>

css代碼：

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

說明 :

這是實(shí)現(xiàn)一個(gè)盒子四周0.5px的做法， 如果加入border-radius圓角效果，會(huì)發(fā)現(xiàn)，有些手機(jī)會(huì)有圓角發(fā)虛的情況，不過影響不是很大。如果有兩個(gè)盒子，上面一個(gè)盒子沒有邊框效果，下面盒子有邊框效果，兩個(gè)盒子一樣寬，上下在一起的布局方式，你會(huì)發(fā)現(xiàn)，在手機(jī)上有時(shí)候會(huì)對(duì)不齊… 錯(cuò)開了0.5px，原因已經(jīng)很明了了…還有那個(gè)z-index ，可以根據(jù)不同需求來調(diào)整使用，如果可以的話，不使用也是可以的。

方式三： 使用background-image和css3的九宮格裁減

京東之前是這么做的，現(xiàn)在已經(jīng)不被使用了。具體做法，請(qǐng)看下面demo結(jié)構(gòu)：

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

在test.html 中 有如下關(guān)鍵代碼：

html 結(jié)構(gòu)：

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

css 結(jié)構(gòu)：

.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 的九宮格切法，如下圖：

具體有關(guān) border-image 的用法，網(wǎng)上有很多：

w3c 上的這個(gè)講的不是很具體：http://www.kemok4.com/w3school/cssref/pr_border-image.htm

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

但是不推薦這種寫法，畢竟圖片質(zhì)量比較大，能用代碼解決的，不用圖片。在這里border-width 是 1px , 但是 背景是有2px的距離，所以在1px的border-top上，顯示出有顏色的高度就是0.5px, 同理，底邊，左邊和右邊的0.5px，也都很容易實(shí)現(xiàn)。 這個(gè)就是css3的魅力體現(xiàn)(這個(gè)現(xiàn)在兼容性也不是很好，在一些較低端的安卓瀏覽器和一些版本的safari 支持的也不是很好)。

方式四 (推薦)： weui的實(shí)現(xiàn)方式 :

這是一款微信團(tuán)隊(duì)開發(fā)的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);
}

方式五： 使用同周邊相似的淺色，利用視覺效果，讓用戶產(chǎn)生錯(cuò)覺

這個(gè)就考驗(yàn)設(shè)計(jì)師的功力了 ：)

其他說明：不是很推薦使用漸變來做 , 在移動(dòng)設(shè)備上可以看到，但在一些瀏覽器上看不到，不便于調(diào)試。

感謝各位的閱讀！關(guān)于“如何使用css3做0.5px的細(xì)線”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！