搜尋
首頁web前端css教學如何使用css3做0.5px的細線

如何使用css3做0.5px的細線

Jun 26, 2018 pm 03:24 PM
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);
}

說明<p></p>這是實作盒子上邊框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);
 }

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

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

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

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

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

在test.html 中有以下關鍵程式碼:<p></p>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 的九宮格切法,如下圖:<p></p>

#具體有關border-image 的用法,網路上有很多:<p></p>在MDN 上有明確的介紹,並且有許多配圖,包括相容性等等:https://developer.mozilla.org/en-US/docs/Web/CSS/border-image<p></p>

但是不推荐这种写法,毕竟图片质量比较大,能用代码解决的,不用图片。在这里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中文网!

相关推荐:

 css3中移动属性的分析

如何使用css3画个同心圆

CSS3中@keyframes动画的实现

以上是如何使用css3做0.5px的細線的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
什麼是CSS網格?什麼是CSS網格?Apr 30, 2025 pm 03:21 PM

CSS網格是創建複雜,響應式Web佈局的強大工具。它簡化了設計,提高可訪問性並提供了比舊方法更多的控制權。

什麼是CSS Flexbox?什麼是CSS Flexbox?Apr 30, 2025 pm 03:20 PM

文章討論了CSS FlexBox,這是一種佈局方法,用於有效地對齊和分佈響應設計中的空間。它說明了FlexBox用法,將其與CSS網格進行了比較,並詳細瀏覽了瀏覽器支持。

我們如何使用CSS使網站迅速響應?我們如何使用CSS使網站迅速響應?Apr 30, 2025 pm 03:19 PM

本文討論了使用CSS創建響應網站的技術,包括視口元標籤,靈活的網格,流體媒體,媒體查詢和相對單元。它還涵蓋了使用CSS網格和Flexbox一起使用,並推薦CSS框架

CSS盒裝屬性有什麼作用?CSS盒裝屬性有什麼作用?Apr 30, 2025 pm 03:18 PM

本文討論了CSS盒裝屬性,該屬性控制了元素維度的計算方式。它解釋了諸如Content-Box,Border-Box和Padding-Box之類的值,以及它們對佈局設計和形式對齊的影響。

我們如何使用CSS動畫?我們如何使用CSS動畫?Apr 30, 2025 pm 03:17 PM

文章討論使用CSS,關鍵屬性並與JavaScript結合創建動畫。主要問題是瀏覽器兼容性。

我們可以使用CSS向我們的項目添加3D轉換嗎?我們可以使用CSS向我們的項目添加3D轉換嗎?Apr 30, 2025 pm 03:16 PM

文章討論了Web項目的3D轉換,關鍵屬性,瀏覽器兼容性和性能注意事項的討論。 (角色計數:159)

我們如何在CSS中添加梯度?我們如何在CSS中添加梯度?Apr 30, 2025 pm 03:15 PM

文章討論了使用CSS梯度(線性,徑向,重複)來增強網站視覺效果,添加深度,焦點和現代美學。

CSS中的偽元素是什麼?CSS中的偽元素是什麼?Apr 30, 2025 pm 03:14 PM

文章討論了CSS中的偽元素,它們在增強HTML樣式方面的使用以及與偽級的差異。提供實用的例子。

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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。