<bdo id="2qzc4t"></bdo><acronym id="2qzc4t"></acronym><pre id="2qzc4t"></pre>

                            News & Events

                            新聞動態

                            所在位置:

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

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

                            時間:2019-08-21 00:00:00浏覽次數:124
                              我們在進行網頁開發時,經常會遇到一些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號
                            首頁
                            菜單
                            産品
                            位置
                            電話
                            導航