News & Events

新聞動態

所在位置:

首頁新聞動態建站經驗網頁前端開發技巧之細邊框有哪些寫法?

網頁前端開發技巧之細邊框有哪些寫法?

時間:2019-08-21 00:00:00浏覽次數:22
  我們在進行網頁開發時,經常會遇到一些1px的細邊框或細線條。比如下圖的列表頁面,每行列表之間的灰色細線條分隔線。  網頁前端開發技巧之細邊框的幾個寫法  一般的app邊框描邊的線都小于一像素,那麽我就像往常一樣直接描了1px的邊框,雖然是1px可是結果和app裏的描邊完全不一樣“粗了”,所以就需要一些技巧來解決這個問題。  1,做一張高2像素(1像素有顔

  我們在進行網頁開發時,經常會遇到一些1px的細邊框或細線條。比如下圖的列表頁面,每行列表之間的灰色細線條分隔線。



  網頁前端開發技巧之細邊框的幾個寫法

  一般的app邊框描邊的線都小于一像素,那麽我就像往常一樣直接描了1px的邊框,雖然是1px可是結果和app裏的描邊完全不一樣“粗了”,所以就需要一些技巧來解決這個問題。

  1,做一張高2像素(1像素有顔色1像素沒顔色)的圖片做背景,bg-size設置寬100%,高1px

  .line li{

  background:url('line.png')left top no-repeat;

  background-size:100%1px;

  background-position:left bottom;}

  


      


  •   


  •   


  •   


  這個方式可以,但有點瑕疵,那麽問題來了,左右邊框描邊雖然可以做旋轉(transform),但如果要是邊框更換顔色那不是還要在做圖片了,好像是有點麻煩哦;

  2,所以用上個方法聯想到了線性漸變(linear-gradient)

  .line li{border:none;

  background-image:-webkit-linear-gradient(#222 50%,transparent 50%);

  background-image:-moz-linear-gradient(#222 50%,transparent 50%);

  background-image:-o-linear-gradient(#222 50%,transparent 50%);

  background-image:linear-gradient(#222 50%,transparent 50%);

  background-size:100%1px;

  background-repeat:no-repeat;

  background-position:bottom;}

  


      
  • linear-gradient


  •   
  • linear-gradient


  •   
  • linear-gradient


  •   


  這個方式還是有點瑕疵,改變描邊位置(left,top,right,bottom)需要修改參數。

  如left描邊需要改變:

  background-image:-webkit-linear-gradient(left,transparent 50%,#222 50%);

  background-size:1px 100%;

  background-position:left;

  都不一一列出了,好像還是有點麻煩;

  3,用CSS3陰影(box-shadow),就是用陰影做描邊然後用僞類把多余的給遮罩著,

  .line li{box-shadow:inset 0-1px 1px#000;background:#fff;margin-left:-1px;margin-bottom:10px;position:relative;}

  .line li::after{content:'';position:absolute;top:0;left:0px;right:0px;bottom:0px;border:1px solid#fff;}

  


      
  • box-shadow


  •   
  • box-shadow


  •   
  • box-shadow


  •   


  OK,這樣子好多了。到底用哪一種好呢,這都是因人而異,我只不過是給出了這些方案,僅供大家參考,具體的方案還需要大家在各自的項目中根據具體情況來決定。
廈門
廈門市思明區軟件園二期望海路19號之二303
福州
福州市倉山區金山街道浦上大道216號福州倉山萬達廣場C區C3號樓6層
泉州
泉州晉江市青陽泉安中路與湖光路交叉處嘉誠商廈10層
Copyright © 2010- 2019 會心科技, All Rights Reserved     閩ICP備 10202970號
首頁
菜單
産品
位置
電話
導航