搜尋
首頁web前端css教學css3做0.5px的細線實例分享

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>


<p></p>

css程式碼:<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);
}

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

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

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

html程式碼:<p></p>


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

css程式碼:<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);
 }

說明:

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

z-index

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

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

京東之前是這麼做的,現在已經不被使用了。具體做法,請看下面demo結構:

<p></p>

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

在test.html 中有以下關鍵程式碼:

html 結構:

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

css 結構:

<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(&#39;pic.png&#39;) 2 1 1 1 stretch; 
-webkit-border-image: url(&#39;pic.png&#39;) 2 1 1 1 stretch;
}

而pic.png 的九宮格切法,如下圖:

<p></p>

#具體有關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实现冲击波效果

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

CSS3中transform功能

以上是css3做0.5px的細線實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
這麼多顏色鏈接這麼多顏色鏈接Apr 13, 2025 am 11:36 AM

最近有一系列有關顏色的工具,文章和資源。請允許我通過將它們四捨五之後關閉幾個標籤,以供您享受。

自動利潤在Flexbox中的工作方式自動利潤在Flexbox中的工作方式Apr 13, 2025 am 11:35 AM

羅賓以前已經介紹過這一點,但是我在過去的幾周里聽到了一些關於它的困惑,看到另一個人在解釋它,我想

移動彩虹移動彩虹Apr 13, 2025 am 11:27 AM

我絕對喜歡三明治網站的設計。在許多美麗的功能中,這些標題是滾動時帶有彩虹的下線。它不是

新年,新工作?讓我們做一個網格驅動的簡歷!新年,新工作?讓我們做一個網格驅動的簡歷!Apr 13, 2025 am 11:26 AM

許多流行的簡歷設計通過以網格形狀鋪設部分來充分利用可用的頁面空間。讓我們使用CSS網格創建一個佈局

將用戶擺脫過多習慣的一種方法將用戶擺脫過多習慣的一種方法Apr 13, 2025 am 11:25 AM

頁面重新加載是一回事。有時,當我們認為它沒有響應或認為新內容可用時,我們會刷新頁面。有時我們只是生氣

域驅動的設計與React域驅動的設計與ReactApr 13, 2025 am 11:22 AM

關於如何在React世界中組織前端應用的指導很少。 (只需移動文件,直到“感覺正確”,大聲笑)。真相

檢測非活動用戶檢測非活動用戶Apr 13, 2025 am 11:08 AM

大多數情況下,您並不真正在乎用戶是否積極參與或暫時非活動。不活躍,意思,也許他們

Wufoo ZapierWufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo一直在集成方面非常出色。他們與特定應用程序(例如廣告系列顯示器,MailChimp和Typekit)進行集成,但他們也

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器