首頁 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程式碼:

1

<p></p>

登入後複製
登入後複製

css程式碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

.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 ! 注意此處有坑! ! ! :

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

1

2

3

-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程式碼:

1

<p></p>

登入後複製
登入後複製

css程式碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

.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程式碼:

1

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

登入後複製

css程式碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

.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結構:

1

2

3

├─demo/ ························ demo 目录

        └─┬─ test.html  ··············· test.html 文件

        └─── pic.png ·················· png 图片文件

登入後複製

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

html 結構:

1

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

登入後複製

css 結構:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

#具體有關border-image 的用法,網路上有很多:

在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 , 它的使用方式是这样的:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

.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

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

純CSS3怎麼實現波浪效果? (程式碼範例) 純CSS3怎麼實現波浪效果? (程式碼範例) Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果? (程式碼範例)

巧用CSS實現各種奇形怪狀按鈕(附代碼) 巧用CSS實現各種奇形怪狀按鈕(附代碼) Jul 19, 2022 am 11:28 AM

巧用CSS實現各種奇形怪狀按鈕(附代碼)

css怎麼隱藏元素但不佔空間 css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

css怎麼隱藏元素但不佔空間

css3怎麼實現花邊邊框 css3怎麼實現花邊邊框 Sep 16, 2022 pm 07:11 PM

css3怎麼實現花邊邊框

原來利用純CSS也能實現文字輪播與圖片輪播! 原來利用純CSS也能實現文字輪播與圖片輪播! Jun 10, 2022 pm 01:00 PM

原來利用純CSS也能實現文字輪播與圖片輪播!

css3什麼是自適應佈局 css3什麼是自適應佈局 Jun 02, 2022 pm 12:05 PM

css3什麼是自適應佈局

css3如何實現滑鼠點擊圖片放大 css3如何實現滑鼠點擊圖片放大 Apr 25, 2022 pm 04:52 PM

css3如何實現滑鼠點擊圖片放大

css3動畫效果有變形嗎 css3動畫效果有變形嗎 Apr 28, 2022 pm 02:20 PM

css3動畫效果有變形嗎

See all articles