css3做0.5px的細線實例分享-css教學-PHP中文網

首頁

web前端

css教學

css3做0.5px的細線實例分享

小云云

Jan 19, 2018 am 09:47 AM

css3

這篇文章主要介紹了使用css3做0.5px的細線的範例程式碼的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

Webapp中的CSS3實現0.5px的細線

感覺很久沒寫過博客了，最近生活還算穩定，過得較為充實，所以又要開始寫寫東西了，一個是為了做些記錄，是怕自己某一天，忘記了，回頭翻翻博客，就會再次的拾起來，記憶，就是這樣。

曾看過淘寶，京東，易迅，一號店等等電商的行動端網站，這些大的電商站的共同特點是做的精緻，用戶體驗良好，其中在佈局方面， 0.5px的線看起來就比1px的線看上去要精緻很多。

方法一：使用漸層來做

html程式碼：

<p></p>

登入後複製

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 ! 注意這裡有坑！！！：

對於不同瀏覽器的相容，我們需要使用不同的前綴如：

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

登入後複製

坑就在這些前綴裡：我們把程式碼裡的height 1px 變成100px , 參數同為0deg, transparent 50%, #e0e0e0 50% 並使用最新版的chrome來測試。

linear-gradient 有以下結果：

#經過一系列的測試總結，我們可以推理出下面的漸變方式：

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

經文總結，我們看到-webkit前綴的漸變方式為：

其他的前綴如果用到，還請朋友們自己來嘗試填坑！

說明：

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

##方式二：使用縮放

html程式碼：

<p></p>

登入後複製

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

登入後複製

說明這是實現盒子上邊框0.5px的做法，不是很推薦這種做法，因為經過測試，一些手機端瀏覽器顯示的不是太好。這種實現的原理是：在Y軸方向上，壓縮一半。就像上面註解的。

如果你覺得效果不太好，這裡有一個fallback or workaround， whatsoever：就是上面註解掉的那種做法：可以嘗試使用
border-top:1px solid #e0e0e0; 代替background- color的做法，京東就是這麼做的(如果沒改版的話)：http://m.jd.com/

方式二的拓展: 如果要實現四周全是0.5px的線條的話：

html程式碼：

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

登入後複製

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

登入後複製

說明:

這是實現一個盒子四周0.5px的做法，如果加入border-radius圓角效果，會發現，有些手機會有圓角發虛的情況，不過影響不是很大。如果有兩個盒子，上面一個盒子沒有邊框效果，下面盒子有邊框效果，兩個盒子一樣寬，上下在一起的佈局方式，你會發現，在手機上有時候會對不齊…錯開了0.5px ，原因已經很明了…還有那個

z-index

，可以根據不同需求來調整使用，如果可以的話，不使用也是可以的。

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

京東之前是這麼做的，現在已經不被使用了。具體做法，請看下面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(&#39;pic.png&#39;) 2 1 1 1 stretch; 
-webkit-border-image: url(&#39;pic.png&#39;) 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);
}

登入後複製

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

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

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