Using Border-image to achieve a 1px bottom edge similar to IOS7

Using Border-image to achieve a 1px bottom edge similar to IOS7

IOS7 has been released for some time, flat design style there are many commendable places, and many of the design details are worth studying.

First, look at the border in the following iOS settings:

From the above can be seen iOS7 design is very fine, border is a very thin line. This article explains how to use border-image to achieve the border effect of iOS7.

Before looking at the following content, you need to understand devicepixelratio and border-image, unfamiliar classmates please self-brain repair:

• Device pixel ratio devicepixelratio simple introduction
• CSS3 Border-image detailed, application and jquery plugins

borderProperty Implementation Effect

We typically use attributes when implementing border border , as follows:

.border-1px {    border-width: 1px 0;    border-style: solid;    border-color: #333;}

Comparison of display effects:

This picture above can be seen, on the phone border does not achieve the effect we want. This is because the Devicepixelratio feature led to the iphone's devicepixelratio==2, which border-width: 1px describes the device-independent pixels, so the border is magnified to the physical pixel 2px display, which appears thicker on the iphone.

Use border-imageproperty to implement physical 1px

Usually the mobile phone page design manuscript is magnified one times, such as: in order to adapt to the iphone retina, the design will be designed to 640*960 resolution, the picture in accordance with twice times the size of the cut out, in the mobile phone side of the look will not be empty, very clear.

Similarly, when used border-image , the border is designed as a physical 1px, as follows:

Style settings:

.border-image-1px {    border-width: 1px 0px;    -webkit-border-image: url("border.png") 2 0 stretch;    border-image: url("border.png") 2 0 stretch;}

Comparison of display effects:

Here the effect on the phone and iOS7 is very close.

Example: http://maxzhang.github.com/examples/border1px/index.html

Note:border.png can also be used directly with the base64 substitution

. border-image-1px {border-width:1px 0px; -webkit-border-image:url ("Data:image/png;base64, ivborw0kggoaaaansuheugaaaaeaaaaecayaaabp2fu6aaaacxbiwxmaaastaaaleweampwyaaaktwldq1bqag90b3nob3agsundihbyb2zpbguaahjanvn3w jp3fj7f92upvkly8lgxbieaiioscmgqwaiqkgbhhbasqmwfiapwfburnehvxilvckidiokgklhnqyqiwotvxdjuh9yntx167+3t+9f7voec5/ zoec8pgbesjphmomoaovkfpdryh49psmtjvyacfujgbcaq5svczwxfaadwa3l4fnswp/wbr28aagbw1s4kesfh/ 4o6uczxaccraoaieuclazbsamguvmguamgyalbts2qkajqaagx5feiiakonaoz0st4fanipk9wxaniihkkiai0bajkoryqcqlsayfwbuiwcwmiaokxaii4ewk 4bgfm2mkccgl0fahaowjapqgaagjlclmwaidgcaemee80diewdoddsv+ Cpx3cfuegbamdllc2xs9izfliv0bp38vdg4ihiwmyxqmexkrbmceqinjebixni5wnmzgwaabr50ch+od+q5+bk4ezm52zv9mwi/mvwbyi+ifhf /rymagqaee7p79pf5exwa3dhabb1v2upwwdavgbo3/ldm9sjofok0hr5i3k4/eaenqfqydwdhaolc+0lyqg9moolpv8z4w/gi372/eae/ tt68abxmkczrccjg/1xyw52rlko58seqjfu9+cj/seff/2okdhinlfclbwk8vijufaitcd5uvkrrchjleis6x8y8r+w/ Qmtdw0arizpwe62b7xlbmb+7geciw5y0nyaqh7zlywac5eaegc0mnn3aactv/mpqcsbam2xpomaalzogfyolbdmxggaaesggsqwqqcmwrsswa6cwr28wbccyqzeqawkwdwqqgbkgbwkoriwqrluwdryblwwaxqgezrheltbmtgn5+ Asxihrcbcgybiewhi8hgkeqcgie2ehoogryo7yis4if5mobcjhsdssgkqg6yguuslfyhkkaqlcapfdscpylxiuoy1cqpqq28ggmor8irxhmzsbsled1aj1qlm Ohxqkxqbz0xq0d12alqjr0rq0hj2atqkn0uvodxqafyqoy4drmq5mjnlhxiyhrwcjwbomxxzj5vg1vo81yx1yn3yvg8ceye8ijaklgbpscf6eemjsgpcqr1hm weoojewjtbk6cfcjg4qxwicik6hptcv6evneegi6szbyrqwm7ieeiz4lxicoe1+tscqoyzlktgohjzaysqtja0jbsc2ku6q+ 0hbpnewm65btyd7kclkarccxkbeqd5bpkvvjw+s3fdrfiojmcaikuqsueko1zt/ lbkwfmkkzokprzame1aiqidqfwkltohzql1ohqrm0dzolzzswq8uklapv0jppz2n3ac/pdloj3ymerzfql9jr6afp5+ md9hcmdyyng8diyigzaxl7gacytxkvmuymbdoxmchumncyg5lnma+ yb1vykvyqfbwryhkvopvwlx6v56puvxnvp9v5qgtuq1upq15wfazgvbnq46kj1bar1akdvbupnq7oundsj1dpuv+jvl/ 9gvpjdbkghuaghkijvgo3xhmnirbgmmxxwelwclyd6yxrme1iw7l57ex2bfsbdi97tfndc6pmrgarzp3mcc0bdsax4pa52zxkzihodc57lqmtpy2x1mqtzq1 +rtfaetq+2mltcu0w7eva73vwnucdlj31om0693ujuja6ubqfutt1z+o+02preekj9cr1dund0uf1bfsj9rfq79bv0r83mdqinpazbde4y/ Dmkgpoa5hpunhwhogoectoupheakprsamnucbuh2fjnxgxpmasbxxirdtezdxrpgfiatlbpmskxes+ Kc2ua5pmutg003tmzmgs3kzyrmnsjjnvngueyb7zvnv8jywlrzzfsos2i8ew2pz8ywwwtzb3rjhwplz5vvvw16xj1lzrlott1ldsubtxmwybopvltqitm63ed ptt3xtifi8p0in1u27amez87arsmuwg7tn2yfyl9m32zx3mhbid1jt0o3xydhxmdmxwvouk4ttdqcspw+ lxzxtnoxod8zuxpkuqyxkxdpcxu22niqdun3rlleua7rrstdp1o5u7m9yt2w3u3cw9xx2r+ 00umxvjxcm970h08pdy4nhm452nm6fc85dnl152xlle+70et7ocjp7wmg3i28rb4l3le2a6pj1l+s7paz7gpgkfep+hvqa+it89vin+ 1n6zfgf8nvs7+sv9j/i/4xnyfvfobwabwqhlab2bgogza2sdhwszbkuhnqwnbbsglww+ fuimcq1zh3ktb8ax8hv5yzpczyya0rxkcj0vwhv6mmwmtb7wey6gzwjfeh5vpvlm6cy2cijgr2yiub9pgzkx+ x0uksoyqi7qubrtdhf09yzwrorz+2e9jvgpqyy5o9tqtnj2z6xqbfjsy+ ybuic4qribeif4rfgxenqtjantiete2mq9ienzaudsmjoc5jpulnrjruxcorkx5unoy553pfk1wzb8oiwyepeyp+ wdiejqlxhp5adutr0t8osbhu9fvqknolgxt7hkpjlmnvav9jjdo31d+migt0z1xjmjt1irezezkrkj801wrnberm/ zcdktozscljyjug1plrqr1zc3kldpzisrkw3keeztyhuth8r35cp5c/pbfwyftngjtfkuua4wtc+ok3hbgft4uei9sfrum99m/ Ur5iwucfny9klbqulcz2lh4wfhgir9fuxyji1mxdy4xxvk6zhhp8nj9y2jlspb9uojyulxyannc8o5sg9klpumrglc0lamuycturvrauwmvyzvkve9ql9vbvn 8qf5vfrhcsqk74sea45ujxtl/vfpv5bdra3kq3yu3rsouk626s91m/ r0q9akhv0ibwda0b8y3lg19tst50oxpq9y7ntm3kzqm1ytxtw8y2rnvyotaj9nqdf13lvv2tq7e+2sba1r/ dd3vzdomdftve75tsvlurefdrvuv99w7s7oldjxpig7q/5n7dued3t8wej3ulewf2re/ranrvbnyvv7+ ycw1sno0esdpw5zuab9qb7zp3txbakg7cqexbj9+mfhvjuoihzspcw83fmx+39qjrshkr0jq/dawto22gpag97+imo50dxh1hvrf/ fu8x42n1xzwpv56gnsg98fnkgppjp2snnp1opz3umdx590z8mwtduv29z0ppnj8xdo5mt1/3yfpe549d8lxw9cl3ytslt0utpa49r35w/ efir1tv62x3y+1xpk509e3ro9hv03/6asdvc9f41y5dn3m978bsg7dujt0cucw69fh29u0xdwrutnxdeo94r/y+2v3qb/op6n+0/rflwg3g+ gdaym/dwq/vdgmhnv6u/9oh4djhzefvi0yjjy+dhx8bdrq98mtok+gnsqctz8p+vv9563or59/94vtlz1j82pal+ yvpv655qfny76uprzrhi8cfvm55pfgm/k3o233vuo+638e9h5ko/ed+uppr+mphp9bp9z7nfp78l/ee8/ sl0p8zaaaaigniuk0aaholaacagwaa+ F8AAIDPAAB1MAAA6MAAADQYAAAXB5JFXUYAAAACSURBVHJABMEBDQAADMMGCKV1R20H1WXZONOPAER9BJAKC4KUAAAAAELFTKSUQMCC ") 2 0 Stretch

Using Border-image to implement a 1px bottom edge similar to iOS7