這篇文章主要介紹了使用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><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);
}如果你覺得效果不太好，這裡有一個fallback or workaround， whatsoever： 就是上面註解掉的那種做法：可以嘗試使用
border-top:1px solid #e0e0e0; 代替background- color的做法，京東就是這麼做的(如果沒改版的話)：http://m.jd.com/
方式二的拓展: 如果要實現四周全是0.5px的線條的話：
html程式碼：<p></p><p class='bd-all'></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);
}這是實現一個盒子四周0.5px的做法， 如果加入border-radius圓角效果，會發現，有些手機會有圓角發虛的情況，不過影響不是很大。如果有兩個盒子，上面一個盒子沒有邊框效果，下面盒子有邊框效果，兩個盒子一樣寬，上下在一起的佈局方式，你會發現，在手機上有時候會對不齊…錯開了0.5px ，原因已經很明了…還有那個
z-index ，可以根據不同需求來調整使用，如果可以的話，不使用也是可以的。
京東之前是這麼做的，現在已經不被使用了。具體做法，請看下面demo結構：
<p></p>├─demo/ ························ demo 目录
└─┬─ test.html ··············· test.html 文件
└─── pic.png ·················· png 图片文件html 結構：
<p class="bd-t"></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;
}
#具體有關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);
}方式五： 使用同周边相似的浅色，利用视觉效果，让用户产生错觉
这个就考验设计师的功力了 ：)
其他说明：不是很推荐使用渐变来做 , 在移动设备上可以看到，但在一些浏览器上看不到，不便于调试。
相关推荐：
以上是css3做0.5px的細線實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
