css3使用技巧:細線邊框的3種不同的寫法

2016-10-28 1500 4 編輯:網頁前端設計-伍林 來源:H5網頁設計書籍

最近在做一個H5手機頁面項目遇到了一個小小的問題,就是邊框描邊1像素的問題。

例:網易

網易app界面

一般的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;

}

<ul class="line">

  <li></li>

  <li></li>

  <li></li>

</ul>

OK,出來了,但有點瑕疵,那么問題來了,左右邊框描邊雖然可以做旋轉(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;

}

<ul class="line">

  <li>linear-gradient</li>

  <li>linear-gradient</li>

  <li>linear-gradient</li>

</ul>

OK,又出來了,但還是有點瑕疵,那么問題來了,就是改變描邊位置(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;}

<ul class="line">

  <li>box-shadow</li>

  <li>box-shadow</li>

  <li>box-shadow</li>

</ul>

OK,又出來了,那么問題來了,到底用哪一種好呢,這都是因人而異,我只不過是給出了這些方案,僅供大家參考,如果大家有更好的方法可以貼出來大家共同探討。

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾