整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文 | 新京報記者 何安安 實(shí)習(xí)生 閆曉旭
霓虹燈師傅無徒可授，
行業(yè)陷入衰落危機(jī)
近日，很多香港的霓虹燈制作師表示擔(dān)心霓虹燈這門藝術(shù)會漸漸失傳。從前香港街道上的特色霓虹燈招牌漸漸被LED燈所代替。胡智楷師傅，是香港僅存的其中一位霓虹燈師傅，製作霓虹招牌已超過三十年。
胡智楷師傅接受新華網(wǎng)的采訪時表示，自己17歲開始學(xué)習(xí)制作霓虹燈。而現(xiàn)在他把自己原來的工作室搬到了偏僻的葵涌工業(yè)大廈里，面積只有30幾平米，對于制作霓虹燈來說顯得有些擁擠。胡智楷這個月只接到了少數(shù)的訂單。1957年入行的劉穩(wěn)也是香港霓虹招牌制作師傅，也是胡智楷的同事，他說他擔(dān)心這門手藝會失傳。
霓虹燈師傅胡智楷，香港第二年輕的霓虹招牌師傅，但在目前僅存的十來位霓虹燈師傅中，大家都無徒可授。“和所有行業(yè)一樣，如果生意興隆，就會有新鮮血液，”胡智楷說，“如果沒有人加入這個行業(yè)，那就是沒有生意做。”
世界各地的霓虹燈招牌頻頻被拆除
1898年，蘇格蘭著名化學(xué)家威廉·拉姆齊爵士發(fā)現(xiàn)了一種抗液化的氣體，這種氣體被通電時，變成了鮮紅色。他將這種氣體命名為“霓虹”。在我國，1926年上海南京東路伊文思圖書館柜窗上出現(xiàn)我國第一個霓虹燈廣告。1927年我國第一支霓虹燈由上海遠(yuǎn)東化學(xué)制造廠制成，用于上海中央大旅社。20世紀(jì)30年代我國霓虹燈逐步發(fā)展，到1949年全國約有三十多家霓虹燈廠。然而現(xiàn)在，霓虹燈卻在漸漸退出人們的視野。
霓虹燈做成的廣告牌是香港獨(dú)特的文化風(fēng)景線。重疊交錯的霓虹燈宣告著香港的繁華與熱鬧。看著這些色彩明艷的霓虹燈，初次來香港觀光的游客更能體會到大都市的夜是多么明亮。對于很多香港人來說，霓虹燈招牌不僅僅是一個做生意的招牌，它還蘊(yùn)含了香港的日常消費(fèi)與影視文化。王家衛(wèi)導(dǎo)演的《重慶森林》與《墮落天使》中，霓虹燈對劇情發(fā)展，人物心理的塑造都有重要的作用。
香港西區(qū)一家牛排餐廳上掛著的巨型霓虹燈奶牛已經(jīng)成了地標(biāo)。這家餐廳叫做森美餐廳。制作霓虹燈招牌的師傅認(rèn)為牛還是腿長一點(diǎn)好看，于是這個招牌變得非常獨(dú)一無二，招牌中的安格斯牛成了世界上唯一一只長著四條長腿，顏色是藍(lán)白色的牛。但是2011年，香港屋宇署認(rèn)為這個招牌不安全，要將它拆掉。2015年8月，它被拆除了。從20世紀(jì)90年代，霓虹燈開始在香港衰落，制作霓虹燈招牌的師傅說，香港的建筑規(guī)劃愈來愈嚴(yán)格，現(xiàn)在新的廣告牌都會選用LED燈來制作，它沒有霓虹燈那種濃濃的暖意，但是勝在價格低廉，更容易維修，使用壽命更長。
香港閃爍的霓虹燈招牌現(xiàn)在大多被LED燈取代。圖片來源：Medium
這頭閃閃發(fā)光的牛將近10英尺長，8英尺高，懸掛在街頭，慕名而來的游客很容易就找到這家餐廳，但是這個巨型招牌慘遭摘除。圖片來源：Vice
而在以前的上海，霓虹燈也曾是一道非常著名的風(fēng)景線。上海曾有一首非常著名的竹枝詞流傳甚廣：“火樹銀花燦若何，西商賽會賽燈多。電光環(huán)作招牌字，萬點(diǎn)明星遍屋羅。”這首詞描繪的正是上海夜景，霓虹燈的奪目光彩使得上海的夜晚更加熱鬧。現(xiàn)在在上海也可以看到一些具有歷史意義的霓虹燈，但只是這樣的招牌已經(jīng)少之又少了。一位名叫Victor Chiang的攝影師，慕名上海霓虹夜景，拍了很多獨(dú)特的夜上海照片，很多照片中可以看到布滿霓虹燈的老街道。但是我們能看到的“原汁原味”的霓虹燈卻越來越少。
在西方，霓虹燈的盛況也一去不復(fù)返。加拿大溫哥華曾被譽(yù)為“霓虹燈之都”，在1950年的時候，各式各樣的廣告是在用霓虹燈做宣傳，教堂外面的裝飾也是用的霓虹燈。在當(dāng)時溫哥華條狀霓虹燈產(chǎn)量全球第一，平均每18個人，每12個工廠就有一個霓虹燈招牌，世界最大的霓虹燈也在這里。但是隨著商業(yè)科技的進(jìn)步，霓虹燈終究還是沒有逃過衰退之勢。
霓虹燈獨(dú)特的藝術(shù)價值
霓虹燈首次亮相是在1910年的巴黎車展上，裝點(diǎn)大樓外表的燈光散發(fā)出與以往不一樣的顏色，在場所有嘉賓的注意力都被這新奇的燈光吸引了。霓虹燈不能用于室內(nèi)，最佳用途就是用在商業(yè)領(lǐng)域和街頭招牌上。霓虹燈首先應(yīng)用最多的是理發(fā)店，接著便擴(kuò)散城市的各個角落。巴黎的城市氣質(zhì)又讓它和霓虹燈天生一對。過了一段時間，霓虹燈來到了美國，1939 年的紐約世界交易會上，霓虹燈裝點(diǎn)許多招牌，很多公司都愿意用霓虹燈為他們的產(chǎn)品進(jìn)行宣傳。
霓虹燈除了在商業(yè)上大放光彩，霓虹燈還積極參與到了曾經(jīng)東歐國家的“政治宣傳”之中。蘇聯(lián)在 1960 年代實(shí)施了東歐首都的“霓虹燈化”，意在和西方國家比拼實(shí)力。在華沙，霓虹燈裝點(diǎn)在許多公共樓房外面。因而當(dāng)東歐公民出門環(huán)顧外面的世界，他們會看到非常有意思的場景：他們不僅能看到老式的政治標(biāo)語，也能看到很多政治宣傳海報被霓虹燈包圍著。
霓虹燈不僅僅只是一種裝飾，它還具有極高的藝術(shù)價值。霓虹燈成為了很多科幻小說的素材，而且極大推動了賽博朋克藝術(shù)的發(fā)展。它成了科幻賽博朋克電影的標(biāo)志性背景，因?yàn)槟藓鐭裟墙k麗的色彩可以同時表現(xiàn)出各種強(qiáng)烈的反差感：繁榮與頹廢的對立，未來與現(xiàn)實(shí)的交錯，富裕與貧窮的反差，讓人產(chǎn)生出時空交錯的感覺。
賽博朋克是科幻小說中的一個分支，傾向于描繪“高科技與低端生活的結(jié)合”。賽博朋克作者試圖從偵探小說、黑色電影和后現(xiàn)代主義中汲取元素，描繪20世紀(jì)最后20年數(shù)碼化社會不為人知的一面。賽博朋克的反烏托邦世界，被認(rèn)為是20世紀(jì)中葉大部分人所設(shè)想的烏托邦未來的對立面。正是因?yàn)橘惒┡罂诉@樣的風(fēng)格，改編出來的電影也喜歡光影交錯的感覺，霓虹燈就是他們經(jīng)常選用的元素。圖片來源：Cyberpunk conception via Sergii Golotovskiy
霓虹燈在20世紀(jì)也極大推動了波普藝術(shù)的發(fā)展。波普藝術(shù)雖然已經(jīng)成了歷史，但是它帶給美國藝術(shù)界的影響是巨大的。波普藝術(shù)是美國現(xiàn)代文化發(fā)展的助力器，正是由于波普藝術(shù)的發(fā)展，1960和1970年代震撼美國社會的形形色色的反藝術(shù)運(yùn)動才接踵不斷地涌現(xiàn)。波普藝術(shù)家在美國消費(fèi)主義浪潮的推動下，不僅受到電視或雜志上標(biāo)準(zhǔn)化的廣告所影響，還受到了夜晚散發(fā)著迷離氣息的霓虹燈的影響。這些藝術(shù)家在他們的作品中極大地融合了霓虹燈藝術(shù)中明艷的色彩元素。
美國雕塑家瓦爾達(dá)·克里薩(Valda Chryssa，1933年生)是一位波普藝術(shù)家，擅長創(chuàng)作管裝雕塑。作品用紅、橘紅、綠、藍(lán)色的霓虹燈管，構(gòu)成一個像“8”字形的排列構(gòu)圖，產(chǎn)生霓虹燈的效果。這種商業(yè)廣告性質(zhì)的波普藝術(shù)作品，借助于光和氖而構(gòu)成，再加上定時斷聯(lián)器，制造霓虹燈的效果，以新奇、精致及巧妙的藝術(shù)特色而吸引人。圖片來源：jmsou.com
藝術(shù)家用多樣的方式挽救這門藝術(shù)
雖然霓虹燈被越來越多的LED節(jié)能燈代替，街道上也越來越難看到霓虹燈的招牌，但是越來越多的人開始懷念起這樣的文化，各個地區(qū)與藝術(shù)家開始用各種各樣的方式挽救這樣的一種視覺文化。
很多國家和地區(qū)專門開設(shè)霓虹燈博物館來保存這些霓虹燈招牌。美國加州的“霓虹藝術(shù)博物館”
（Museum of Neon Art）
中，收藏著各種各樣的霓虹燈招牌，當(dāng)你走進(jìn)來的時候，你會從博物館的各個位置看到各式各樣的霓虹燈。博物館里收藏了很多老舊、殘破、被扔掉的霓虹燈中拯救出來的霓虹燈招牌。很多霓虹燈大部分的來源竟然是垃圾場。這個博物館的開放在美國掀起了一股懷舊之風(fēng)，這些老舊的霓虹燈招牌展示了上世紀(jì)曾經(jīng)在這個城市閃耀過的光芒。在香港，一大批藝術(shù)家與策展人正在搶救這樣的藝術(shù)，因?yàn)橄愀廴嗽?jīng)的身份認(rèn)同中，霓虹燈也扮演了重要角色。M+博物館就是專門收集香港霓虹燈招牌的博物館，這家博物館專門在線收集香港的霓虹招牌照片，也收集一些被拆除的霓虹招牌。森美餐廳的霓虹奶牛拆除令人一度惋惜，但是現(xiàn)在它也收藏在M+博物館之中。
2019年2月24日到5月10日在香港島北角油街附近正在舉辦名叫「城街·招牌」的藝術(shù)展覽。布展人認(rèn)為在香港的歷史中，街道上的霓虹燈招牌一代又一代地繁衍，塑造香港的城市面貌。創(chuàng)辦人及建筑師Ken和Kevin希望通過「城街·招牌」的燈光裝置，展示霓虹燈招牌的多種特點(diǎn)，以提高公眾對霓虹燈藝術(shù)價值的認(rèn)識。
「城街．招牌」燈光裝置的布展現(xiàn)場。圖片來源：timable
為了挽救霓虹燈文化很多藝術(shù)家還另辟蹊徑。2014 年 Sas Simon 和 Lena Imamura 一同創(chuàng)立了做定制霓虹燈的公司 NameGlo，主要將霓虹燈應(yīng)用于室內(nèi)設(shè)計(jì)。NameGlo 的定位是將霓虹燈打造成一件有意義的藝術(shù)品而不僅僅是一件家居裝飾品。它的獨(dú)特點(diǎn)在于將做霓虹燈標(biāo)牌的過程流程化透明化，讓顧客自己制作具有自己藝術(shù)風(fēng)格的霓虹燈。“霓虹燈藝術(shù)對于現(xiàn)代藝術(shù)仍然具有重要意義，希望通過我們公司這樣的服務(wù)，把霓虹燈與顧客之間的距離拉近”， Lena Imamura 說。霓虹燈藝術(shù)絕不是一種過氣的藝術(shù)。有人專門在ins上成立了neonnewyorkcity（紐約城霓虹燈）的賬號。在很多人心中霓虹燈不僅僅是夜生活、經(jīng)濟(jì)繁榮的象征，更是一種獨(dú)一無二的藝術(shù)。
霓虹藝術(shù)博物館是一個通過保存，收集和解釋霓虹藝術(shù)來鼓勵學(xué)習(xí)和好奇的機(jī)構(gòu)。第一個致力于融合霓虹燈照明的藝術(shù)博物館，專門展示電子媒體藝術(shù)，包括動態(tài)藝術(shù)和歷史悠久的霓虹燈標(biāo)志。它位于洛杉磯市中心。于2016年在加利福尼亞州格倫代爾重新開放。圖片來源：tripadvisor
英國搖滾天團(tuán)Blur曾經(jīng)的專輯《The Magic Whip》就采用霓虹元素來表達(dá)那種“生到不能再生的生疏感”。
國內(nèi)也有藝術(shù)家在積極響應(yīng)這種文化的復(fù)興。上海也在積極籌建霓虹燈博物館，它將建在上海某創(chuàng)意園區(qū)內(nèi)，占地約600平方米，充分展示霓虹燈藝術(shù)發(fā)展的歷程，與工藝發(fā)展水平。在很多人的印象中，上海與它獨(dú)特的夜景緊密相連，那些明亮奪目的夜晚，又融入了讓人難忘的霓虹燈。越來越多的人為霓虹燈的消失而惋惜，但是通過藝術(shù)家們的不斷努力，這門藝術(shù)一定可以被延續(xù)下來。
編譯參考：
The New York Times的“Hong Kong Is Slowly Dimming Its Neon Glow”
https://www.nytimes.com/2015/10/14/world/asia/hong-kong-neon-sign-maker.html?_r=1
the Atlantic的“Neon Is the Ultimate Symbol of the 20th Century”
https://www.theatlantic.com/entertainment/archive/2019/04/being-and-neonness-neon-lights-symbol-20th-century/588184/
作者
：新京報記者 何安安 實(shí)習(xí)生 閆曉旭
編輯
：覃旦思；校對：薛京寧
能源人都在看，點(diǎn)擊右上角加'關(guān)注'】
近幾年來，隨著新能源汽車行業(yè)的蓬勃發(fā)展，新能源汽車市場和國家補(bǔ)貼政策對鋰離子動力電池的能量密度、循環(huán)壽命、安全性能和電池成本不斷提出更高的要求。因此，電池廠商高度重視生產(chǎn)過程中的品質(zhì)管控，努力提高產(chǎn)品的質(zhì)量和一致性，并盡可能降低電池生產(chǎn)成本。
在鋰離子電池工藝開發(fā)和品質(zhì)管控過程中，極片制造屬于前段工序，在整個過程中占據(jù)著重要位置。日本電池界普遍認(rèn)為，電池的質(zhì)量有70%與極片品質(zhì)有關(guān)。究其原因，在于極片品質(zhì)好壞不僅影響電池中段組裝工序，而且會對后段工序、電池的電化學(xué)性能和安全性能產(chǎn)生關(guān)鍵性的影響。美國橡樹嶺國家實(shí)驗(yàn)室的研究[1]表明，在制造成本為502.8 $/kWh的電池中，采用先進(jìn)的極片制造技術(shù)可減少111 $/kWh的成本支出，因此極片制造技術(shù)在降低電池制造成本中發(fā)揮著重要作用。
鋰離子電池極片制造包括合漿、極片涂布和干燥、極片的輥壓和裁切等工序。在之前的文章[2]中已詳細(xì)講述了鋰離子電池合漿工藝的方法和技巧。除合漿工序外，極片涂布和干燥也是制備高品質(zhì)極片的重要環(huán)節(jié)。在實(shí)際的極片涂布和干燥過程中可能出現(xiàn)各種涂布和干燥缺陷，不利于制備具有均一厚度和面密度的極片，嚴(yán)重影響極片性能和良品率。本文主要從各類極片缺陷的形成機(jī)制、防治措施和檢測方法等三個方面進(jìn)行了概括和介紹，并對極片制造技術(shù)的發(fā)展趨勢進(jìn)行了展望。
極片缺陷的種類、形成機(jī)制和防治措施
在極片涂布和干燥過程中，可能出現(xiàn)的缺陷主要分為三類：點(diǎn)狀缺陷、線狀缺陷和邊緣缺陷。點(diǎn)狀缺陷包括團(tuán)聚體顆粒、針孔缺陷和縮孔缺陷等；線狀缺陷主要包括劃痕、豎條紋和橫條紋缺陷等；邊緣缺陷主要包括厚邊和拖尾現(xiàn)象等。下面就各種缺陷的形成機(jī)制和防治措施進(jìn)行介紹。
1.1 點(diǎn)狀缺陷
1.1.1 團(tuán)聚體顆粒
如圖1所示，如果漿料攪拌不均勻，導(dǎo)電劑和粘結(jié)劑沒有形成良好的分散效果，極片表面會出現(xiàn)大面積的凸起，即導(dǎo)電劑的團(tuán)聚體[3]。此外，漿料、涂布設(shè)備或涂布基材中引入Fe、Cu、Zn、Al等金屬粉末，極片表面會形成以金屬粉末為核心、漿料物質(zhì)為表層的團(tuán)聚體。攪拌過程中，環(huán)境濕度太高，導(dǎo)致正極漿料成果凍狀態(tài)，極片輥壓后也會出現(xiàn)團(tuán)聚體顆粒[4-5]。
(A)極片表面光滑，(B)極片表面存在團(tuán)聚體顆粒；(a，b)為(B)的細(xì)節(jié)放大圖，其中導(dǎo)電劑的團(tuán)聚體沒有完全分散；(c，d)為(A)的細(xì)節(jié)放大圖，其中導(dǎo)電劑充分分散、均勻分布
圖1 由球形石墨+SUPERC65+CMC+蒸餾水制備的極片[3]
極片出現(xiàn)團(tuán)聚體缺陷后，在輥壓極片時較軟的顆粒可被碾成粉末、從極片表面脫落，較硬的顆粒則會凸顯出來、形成尖點(diǎn)，存在刺破隔膜、短路的安全隱患[6-7]。研究[8-9]表明，極片表面出現(xiàn)團(tuán)聚體顆粒會對電池的電壓、電壓衰減和循環(huán)壽命等造成不利影響。此外，以Fe、Cu、Zn、Al等金屬粉末為核心的團(tuán)聚體也會對電池造成巨大的危害[5]。尺寸較大的金屬顆粒可刺穿隔膜，導(dǎo)致正負(fù)極之間短路，即物理短路；當(dāng)金屬異物混入正極后，充電之后正極電位升高，金屬發(fā)生溶解、通過電解液擴(kuò)散，然后在負(fù)極表面析出，也可刺穿隔膜、造成短路，這種稱為化學(xué)溶解短路。
針對團(tuán)聚體缺陷的形成機(jī)制，團(tuán)聚體缺陷主要通過優(yōu)化合漿工藝和環(huán)境清潔除塵來消除。
1.1.2 縮孔缺陷
如圖2所示，在涂布過程中，涂布基材受到較低表面張力物體(如油滴、灰塵等)的污染后，污染物周圍的涂布溶液會流向具有較高表面張力的方向，形成像火山口或酒窩狀的縮孔缺陷[10-13]。材料之間表面張力不匹配，是產(chǎn)生縮孔缺陷的主要誘因，但漿料的粘度、流動性以及干燥風(fēng)速和溫度等都可能改變表面張力及其作用過程，從而誘發(fā)形成縮孔缺陷。例如，過低粘度(~1 500 mPa·s)的水性漿料在涂布后，溶液因表面張力不同會脫離疏水的石墨、積聚到表面張力較高的位置，形成縮孔缺陷[13]。
圖2 縮孔缺陷的(a)形成機(jī)制示意圖[13]，(b)極片微觀形貌圖[13]和(c)含火山口狀缺陷的極片外觀圖
針對縮孔缺陷的形成原因，相應(yīng)的防治措施[10,12]有：(a)控制環(huán)境粉塵；(b)漿料過濾除鐵、基材表面清潔；(c)選用相容性好的分散劑或分散介質(zhì)；(d)提高漿料粘度和縮短干燥時間等。
1.1.3 針孔缺陷
濕膜中的氣泡從內(nèi)層向表面遷移，在膜表面破裂會形成針孔缺陷[11-12](圖3)。氣泡主要來自攪拌、涂液輸運(yùn)以及涂布過程[12]。針孔缺陷處活性物質(zhì)涂層較薄，在電池充放電過程中最易造成微短路；正極涂層出現(xiàn)針孔缺陷會降低材料的庫侖效率、倍率性能和循環(huán)性能。因此涂布前的漿料需做好脫泡處理。
圖3 針孔缺陷的(a)極片外觀圖和(b)極片微觀形貌圖[14]
1.1.4橘皮缺陷
在涂布過程中，由于溶劑揮發(fā)，不同的區(qū)域產(chǎn)生溫度差，漿料上層和底層形成濃度差，形成表面張力的梯度及自然對流的現(xiàn)象，涂布溶液就會發(fā)生遷移，最終造成涂布表面不平整、形成橘皮缺陷(圖4)。烘箱的干燥速率過快或熱風(fēng)風(fēng)速過快，溶液在流平前就提早固化，也形成橘皮缺陷[11]。
圖4 (a)真的橘皮和(b)具有橘皮缺陷的極片
抑制橘皮缺陷的形成，可采取以下措施[11]：(a)降低干燥速率，讓溶液可以有足夠的時間流平；(b)在溶液里添加一些低揮發(fā)的溶劑、表面活性劑等，減小溫度差和濃度差。
1.2 線狀缺陷
1.2.1 劃痕
涂布過程中，大顆粒聚集在出料狹縫，所制備涂層會出現(xiàn)與涂布方向平行的線狀薄區(qū)或漏箔線條[15]。這導(dǎo)致涂層不均勻，會影響電池容量的一致性。除此之外，基材質(zhì)量不佳，有異物擋在涂布間隙上或模具模唇損傷也會造成劃痕(圖5)，要注意排查原因。
圖5 涂布過程中的劃痕缺陷[14]
1.2.2 規(guī)律豎條紋缺陷
如圖6所示，規(guī)律豎條紋缺陷是沿涂布方向出現(xiàn)的平行條紋，并且覆蓋整個涂布幅面，就像拿個梳子或者鋤地的耙子沿機(jī)器方向抓，人為地抓出了外觀一樣的缺陷。從流體動力學(xué)的角度來講，涂布漿料受到本身粘彈力、慣性力和表面張力等作用力，在不同方向疊加產(chǎn)生的受力差異會造成涂布厚度的不均勻分布，即形成規(guī)律豎條紋。涂布后肉眼很容易觀察到這種缺陷，在烘干過程中也很難通過流平消除[16]。如果極片出現(xiàn)團(tuán)聚體、針孔和劃痕等缺陷，可切割去除；但一旦發(fā)生豎條紋缺陷，極片幾乎找不到一塊能用的部分，產(chǎn)品得率就降到0%。
圖6 規(guī)律豎條紋的(a)極片外觀圖和(b)示意圖[16]
防治措施[16]主要有：(a)確定工藝是否在合理的工藝窗口內(nèi)，調(diào)整涂布工藝參數(shù)，降低涂布速度；(b)降低涂輥與背輥之間的涂布間隙；(c)添加溶劑或表面活性劑，稀釋漿料，降低漿料粘度；(d)減小輥?zhàn)拥闹睆健?/p>
1.2.3 橫條紋缺陷
橫條紋缺陷是垂直于涂布方向，固定間隔所產(chǎn)生的波紋或線條，主要是由于泵輸送的漿料流量不穩(wěn)定和涂布設(shè)備振動造成的[17]。所以避免橫條紋的出現(xiàn)可更換泵和涂布設(shè)備，涂布頭增加真空盒等來改善。
1.3 邊緣缺陷
1.3.1 厚邊現(xiàn)象
由于漿料流體特性，在涂層起始點(diǎn)、終止點(diǎn)以及兩側(cè)邊緣容易形成半月形，極片邊緣出現(xiàn)厚度突增的現(xiàn)象稱為厚邊現(xiàn)象[18](圖7)。厚邊現(xiàn)象形成本質(zhì)是在表面張力驅(qū)動下物質(zhì)發(fā)生遷移。極片干燥時，涂布邊緣比內(nèi)部區(qū)域溶劑揮發(fā)快，涂布漿料流向高表面張力的邊緣區(qū)堆積，使得邊緣過厚[10,12]。
圖7 厚邊缺陷示意圖[12]
厚邊的危害比較大：(a)影響極片的輥壓、分切和卷繞工藝，極片受力不均會造成極片翹曲度過大，增大后續(xù)分切、卷繞難度；(b)在充放電過程中，電流分布不均勻，容易產(chǎn)生極化；(c)在充放電膨脹/收縮過程中因極片受力不一致，厚邊緣更易失效，影響電池性能。一般地，3C電池工藝設(shè)計(jì)時，可切除極片邊緣來消除這種厚邊的不利影響。動力電池要求高功率和高能量，電池設(shè)計(jì)往往需要保留涂層邊緣[19]，因此厚邊現(xiàn)象需高度重視。
針對厚邊缺陷，可采取以下措施[10,12,19]進(jìn)行解決：(a)添加界面活性劑，降低漿料的表面張力，抑制干燥過程中漿料向邊緣的流延；(b)優(yōu)化狹縫墊片出口形狀，改變漿料流動速度，降低邊緣漿料的應(yīng)力狀態(tài)，減弱漿料邊緣膨脹效應(yīng)；(c)減小涂布間隙。以上措施效果比較有限，最重要的還是需要依靠高精度的涂布設(shè)備來改善。
1.3.2 拖尾現(xiàn)象
漿料粘度太低或固含量過低時，漿料發(fā)生固液分層，因液體的流動性比固體好，當(dāng)固體停止流動時液體部分或者固含量低的部分還會向外流動，就會形成拖尾現(xiàn)象(圖8)。拖尾現(xiàn)象又分為水印式拖尾和鋸齒狀拖尾。水印區(qū)域無活性物質(zhì)和導(dǎo)電劑存在，造成面密度不均的概率較低，因此水印式拖尾危害較小。發(fā)生鋸齒狀拖尾現(xiàn)象時，極片面密度不均勻現(xiàn)象嚴(yán)重，危害較大。另外，漿料發(fā)生沉降或者正極漿料出現(xiàn)“果凍”現(xiàn)象也會出現(xiàn)拖尾現(xiàn)象。
圖8 有拖尾現(xiàn)象的極片外觀圖
除漿料固含量和粘度外，基材和漿料的表面張力差異性也會引起拖尾現(xiàn)象。漿料在基材上潤濕要求漿料的表面張力低，基材的表面能高；否則在涂布后涂層會很快脫潤濕，即涂層從已涂布的地方縮回。因此，除制備固含量和粘度適宜的漿料外，還應(yīng)從這兩方面注意抑制拖尾或回縮現(xiàn)象的產(chǎn)生[10]：(a)基材的表面能與漿料的表面張力要匹配，基材的表面能要高，涂料液體的表面張力要低；(b)防止基材表面干燥點(diǎn)的出現(xiàn)。
極片缺陷的檢測技術(shù)
前文提到的團(tuán)聚體、劃痕、厚邊、條紋、拖尾和橘皮等極片缺陷，會嚴(yán)重影響電池的一致性、使用壽命和安全性能，有效地鑒別和剔除存在缺陷和瑕疵的極片，提高極片品質(zhì)和一致性勢在必行。傳統(tǒng)的人工檢測方法效率低、誤差大，且無法保證檢測質(zhì)量，難以滿足鋰離子電池大規(guī)模生產(chǎn)的需求。近年來，具有精度高、速度快和非接觸等優(yōu)點(diǎn)的現(xiàn)代科學(xué)技術(shù)不斷發(fā)展和完善起來。目前，針對極片品質(zhì)的檢測技術(shù)主要有：射線法測厚技術(shù)、激光測厚技術(shù)、機(jī)器視覺檢測和紅外熱成像技術(shù)。
2.1 射線法測厚技術(shù)——采用X射線或β射線測量涂層的厚度和面密度
X射線或β射線穿透物質(zhì)時，被物質(zhì)反射、散射、吸收，導(dǎo)致穿透的射線強(qiáng)度相對于入射射線強(qiáng)度有一定衰減。衰減比例與被穿透物體的厚度/密度呈負(fù)指數(shù)關(guān)系。通過測量穿透前后的射線強(qiáng)度，即可推斷出物質(zhì)的厚度/面密度[20]。該方法可直接獲得涂布極片的厚度和面密度值，測量精度高；但設(shè)備昂貴、輻射源的維護(hù)管理成本也較高，且使用不當(dāng)會對人體造成傷害。
2.2 激光測厚技術(shù)——檢測極片面密度和缺陷
激光測厚儀一般是由兩個激光位移傳感器上下對射的方式組成的，上下的兩個傳感器分別測量被測體上表面位置和下表面位置，通過計(jì)算得到被測體的厚度。激光在線測厚技術(shù)應(yīng)用于測量極片的厚度，測量精度可達(dá)±1.0μm，還能實(shí)時顯示測量厚度及厚度變化趨勢，便于數(shù)據(jù)追溯和分析[20]。利用激光測厚儀[21-22]可剔除存在厚邊、針孔和團(tuán)聚體等缺陷的極片。
2.3 機(jī)器視覺檢測技術(shù)——檢測極片缺陷
所謂“機(jī)器視覺”，就是利用機(jī)器代替人眼來做測量和判斷，主要是通過采用圖像控制器(CCD)掃描被測物，圖像實(shí)時處理及分析缺陷類別，實(shí)現(xiàn)對極片表面缺陷的無損在線檢測。完整的機(jī)器視覺系統(tǒng)綜合了光學(xué)、機(jī)械、電子和計(jì)算機(jī)軟硬件等技術(shù)，可檢測出0.2mm×0.2 mm及以上的缺陷，檢測速度達(dá)60個/min，具有檢查精度高、處理速度快、抗干擾能力強(qiáng)和運(yùn)轉(zhuǎn)時安穩(wěn)可靠等優(yōu)勢，在大規(guī)模批量生產(chǎn)模式下可替代流水線員工進(jìn)行鋰離子電池極片進(jìn)行全面檢測。
機(jī)器視覺檢測在鋰離子電池制造安全檢測中具有明顯優(yōu)勢，但離大規(guī)模的普及應(yīng)用還存在一定距離，主要是由于部分電池企業(yè)生產(chǎn)工藝、產(chǎn)線自動化程度和進(jìn)口視覺檢測設(shè)備兼容性不高，對機(jī)器視覺檢測系統(tǒng)的功效存在疑惑。因此除少數(shù)大型電池廠商和先進(jìn)企業(yè)率先開始應(yīng)用之外，大多數(shù)企業(yè)仍持觀望態(tài)度。
2.4 紅外線熱成像技術(shù)——檢測極片缺陷
紅外線熱成像技術(shù)也可用來檢測極片缺陷。紅外線熱成像技術(shù)將物體熱輻射的紅外線特定波段信號轉(zhuǎn)換成人眼可見的圖像，并以不同顏色顯示物體表面溫度分布。當(dāng)物體表面存在缺陷時，該區(qū)域會出現(xiàn)溫度偏移；在熱成像技術(shù)獲取的極片溫度分布曲線中，具體表現(xiàn)為缺陷點(diǎn)位置出現(xiàn)溫度尖峰，其中溫度升高的尖峰對應(yīng)團(tuán)聚體，溫度降低的尖峰對應(yīng)針孔或者掉料[5,23] 。紅外線熱成像技術(shù)可有效鑒別一些光學(xué)探測手段無法分辨的缺陷，是一種高效的極片表面缺陷探測手段。目前，紅外線熱成像技術(shù)僅用于科學(xué)基礎(chǔ)研究，距離工業(yè)化應(yīng)用還存在較大距離。
展 望
極片涂布和干燥過程中可能會出現(xiàn)團(tuán)聚體、針孔、劃痕、厚邊和拖尾等缺陷，抑制極片缺陷的形成和及時剔除存在缺陷的極片，對于提高鋰離子電池的電化學(xué)性能、安全性能、一致性意義和降低電池制造成本意義重大。隨著各種高精度、高效率在線檢測技術(shù)的普及和廣泛應(yīng)用，極片缺陷被及時檢測和剔除，涂布和干燥工況條件得到及時反饋和調(diào)整，鋰離子電池在能量密度、高安全性和一致性方面將邁上新臺階。
參考文獻(xiàn)：
[1]WOOD D L, LI J L, DANIEL C, et al. Prospectsfor reducing the processing cost of lithium ion batteries[J].Journal of Power Sources, 2015, 275: 234-242.
[2] 楊時峰，薛孟堯，曹新龍，等. 鋰離子電池漿料合漿工藝研究綜述[J]. 電源技術(shù)，2020，44(2)：291-294.
[3] BITSCH B,WILLENBACHER N, WENZEL V, et al. Impact of mechanical process engineering onthe fabrication process of electrodes for lithium ion batteries[J]. ChemieIngenieur Technik, 2015, 87(4): 466-474.
[4] DAVIDA L,RUTHERA R E, MOHANTY D, et al. Identifying degradation mechanisms inlithium-ion batteries with coating defects at the cathode[J]. Applied Energy,2018, 231: 446-455.
[5] MOHANTY D,HOCKADAY E, LI J, et al. Effect of electrode manufacturing defects onelectrochemical performance of lithium-ion batteries: Cognizance of the batteryfailure sources[J]. Journal of Power Sources, 2016, 312: 70-79.
[6]裴敬龍. 鋰離子電池正極片輥涂存在的問題及解決措施[J]. 新疆有色金屬，2012(增刊2)：112-113.
[7] 覃曉捷，韋京汝，王姜婷，等. 正極極片表面顆粒對電池性能影響的研究[J]. 電源技術(shù)，2017，41(10)：1399-1401.
[8] 王雙雙，武行兵，張沿江，等. 鋰離子電池循環(huán)壽命影響因素的研究[J]. 電源技術(shù)，2015，39(6)：1211-1213.
[9] 宋曉娜. 鋰離子電池自放電研究[J]. 電池工業(yè)，2013(1)：47-50.
[10] 龔海青，郭洪猷，王平. 表面張力引起的涂層弊病(II)[J]. 現(xiàn)代涂料與涂裝，2000(4)：1-2.
[11] 李群英. 涂裝工常用技術(shù)手冊[M]. 上海：上海科學(xué)技術(shù)出版社，2008：293-296.
[12] 遲彩霞，張雙虎，喬秀麗，等. 狹縫式涂布技術(shù)的研究進(jìn)展[J]. 應(yīng)用化工，2016，45(2)：360-364.
[13] 成都茵地樂電源科技有限公司. 極片涂覆與干燥中的縮孔現(xiàn)象[EB/OL].[2013-07-03]. http://www.cd-ydl.com/index.php?go=article-26.html.
[14] KRAYTSBERG A,EIN E Y. Conveying advanced Li-ion battery materials into practice: The impactof electrode slurry preparation skills[J]. Advanced Energy Materials, 2016,6(21): 1600655
[15] SCHMITT M,BAUNACH M, WENGELER L, et al．Slot-die processing of lithium-ion battery electrodes—Coatingwindow characterization[J]．Chemical Engineering and Processing: ProcessIntensification, 2013, 68: 32-37．
[16] COHEN E D. Howcan the ribbing defect be eliminated in web coating?[J]. Converting Quarterly,2015, 5(1): 16-17.
[17] 燃化部第一膠片廠. 擠壓涂布弊病的防止與消除[J]. 感光材料，1973(2)：9-13.
[18] SCHMITT M, SCHARFER P, SCHABEL W．Slot die coming of lithium-ionbattery electrodes: Investigations on edge effectissues for stripe and pattern coatings[J]. Journal of Coatings Technology and Research, 2014，11(1): 57-63.
[19] 新能源Leander.鋰電池極片擠壓涂布厚邊現(xiàn)象及解決措施[EB/OL]. [2017-07-18]. http://www.china-nengyuan.com/tech/111508.html.
[20] 龐可可. 激光測厚儀在鋰電池極片涂布生產(chǎn)中的應(yīng)用性研究[J]. 河南科技，2016(3)：144-145.
[21] 陳功，許清泉，朱錫芳. 鋰電池極片質(zhì)量監(jiān)控系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)[J]. 儀表技術(shù)與傳感器，2013(12)：87-89.
[22] 王瑩. 激光測厚儀在鋰電池極片生產(chǎn)中的應(yīng)用[J]. 電源技術(shù)，2012，36(2)：186-187.
[23] 王云輝，孫青山，李松鞠. β射線在鋰離子電池生產(chǎn)中的應(yīng)用[J]. 電池，2018(5)：347-349.
作者：楊時峰，胥 鑫，曹新龍，邵 樂，田占元
單位：陜西煤業(yè)化工技術(shù)研究院有限責(zé)任公司
免責(zé)聲明：以上內(nèi)容轉(zhuǎn)載自電池中國，所發(fā)內(nèi)容不代表本平臺立場。
全國能源信息平臺聯(lián)系電話：010-65367702，郵箱：hz@people-energy.com.cn，地址：北京市朝陽區(qū)金臺西路2號人民日報社
我相信任何一個前端開發(fā)者都能很快實(shí)現(xiàn)這個需求，不知道大家怎么樣的，我在之前一直都是以下代碼快速實(shí)現(xiàn)：
index.html 文件 ：
<div class='good'>請給我點(diǎn)贊</div>
復(fù)制代碼index.scss 文件 ：
.good {
padding: 3px 6px;
color: #333;
background: rgba(#333, 0.1);
border: 1px solid #333;
border-radius: 3px;
cursor: pointer;
&:hover {
color: #0069ff;
background: rgba(#0069ff, 0.1);
border: 1px solid #0069ff;
}
&.good-click {
color: #0069ff;
background: rgba(#0069ff, 0.1);
border: 1px solid #0069ff;
}
}
復(fù)制代碼index.js 文件 ：
const goodBtn=document.querySelector('.good')
goodBtn.addEventListener('click', ()=> {
if (goodBtn.classList.contains('good-click')) {
goodBtn.classList.remove(['good-click'])
return
}
goodBtn.classList.add(['good-click'])
})
復(fù)制代碼是的，就是那么樸實(shí)無華，缺點(diǎn)也暴露無遺：
針對這個問題我們直接使用預(yù)處理器（SASS/LESS）的變量就完事了：
index.scss 文件 ：
$color: #333;
$hoverColor: #0069ff;
.good {
padding: 3px 6px;
color: $color;
background: rgba($color, 0.1);
border: 1px solid $color;
border-radius: 3px;
cursor: pointer;
&:hover {
color: $hoverColor;
background: rgba($hoverColor, 0.1);
border: 1px solid $hoverColor;
}
&.good-click {
color: $hoverColor;
background: rgba($hoverColor, 0.1);
border-color: $hoverColor;
}
}
復(fù)制代碼咋一看已經(jīng)是很好的實(shí)現(xiàn)方式了，但是也有缺點(diǎn)：
這個時候，css 原生變量 currentColor 即可大顯身手了。
變量 currentColor 能拿到本元素的 color 屬性的值，如果沒有顯示設(shè)置，拿的將會是父元素的 color 屬性的值，由此類推。借助這個特性，我們即可優(yōu)化上述代碼：
index.scss 文件 ：
.good {
position: relative;
padding: 3px 6px;
color: #333;
border: 1px solid currentColor;
border-radius: 3px;
cursor: pointer;
&::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: currentColor;
opacity: 0.1;
content: '';
}
&:hover {
color: #0069ff;
}
&.good-click {
color: #0069ff;
}
}
復(fù)制代碼現(xiàn)在看起來是不是好多了，我每次要更改顏色，只需要將此元素的 color 屬性更改即可，不需要再重新寫一堆重復(fù)的屬性，當(dāng)然，原生的 css 以及功能強(qiáng)大的 sass/less 都還是無法支持 rgba(currentColor, 0.1) 這種寫法，我還去官方提了個 issue ，官方也給了很好的回復(fù)，有興趣的同學(xué)可以看看。
所以現(xiàn)在我只能添加一個 ::before 來模擬背景色塊，真正做到只改 color 屬性，即可改全部顏色。
現(xiàn)在大家就可以在 React 或 Vue 中通過狀態(tài)來控制改變顏色的類名添加與否并設(shè)置 color 屬性，以此來完美地進(jìn)行顏色的快速變換了～
多說一句，如果我們直接使用 ele.style.color='#fff' 這種操作 dom 的形式來改變字體顏色，在未使用 currentColor 的情況下，我們是沒法操作偽元素的，也就改變不了偽元素的 background 、 border-color 等其他與字體顏色一致的屬性，所以這時候 currentColor 的優(yōu)勢就更明顯了～
使用變量 currentColor 減少重復(fù)代碼 - codepen（https://codepen.io/vortesnail/pen/MWyzerK）
給該元素加個偽元素，背景色與聊天框背景色一致，再給該偽元素添加上、左同色邊框，絕對定位調(diào)整位置，再來個 border-top-left-radius: 3px ，最后 transform: rotate(-45deg) 旋轉(zhuǎn)一下，代碼如下：
index.html 文件 ：
<div class="chat-box">大家好，我是 vortesnail，如果大家喜歡我的文章，對大家有所幫助，麻煩給個小小的贊支持一下，謝謝</div>
復(fù)制代碼index.scss 文件 ：
.chat-box {
position: relative;
max-width: 200px;
padding: 10px;
color: #faae43;
background: #fff9ed;
border: 1px solid #ffc16b;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(250, 174, 67, 0.8);
}
.chat-box::before {
position: absolute;
top: 20px;
left: -6px;
width: 10px;
height: 10px;
background: #fff9ed;
border-color: #ffc16b;
border-style: solid;
border-width: 1px 0 0 1px;
transform: rotate(-45deg);
content: '';
/* box-shadow: 0 2px 6px rgba(250, 174, 67, 0.8); */
}
復(fù)制代碼可以達(dá)到現(xiàn)在下面的效果：
細(xì)心的你一定發(fā)現(xiàn)了，這個小三角指示箭頭是沒有陰影的，如果我給其加上與主體元素一致的 box-shadow ，又因?yàn)檫@個屬性不能像 border-color 一樣分別給各邊設(shè)置為透明，結(jié)果就會像下面這樣：
這已經(jīng)是無法滿足具有相同陰影的要求了，而且大家如過想一下就知道，在我主體元素不設(shè) padding 或設(shè)的很小的情況下，小三角的背景色會將我們的文字擋住，這種方案直接宣布失敗！
針對以上的問題，我們進(jìn)行一步步改造。
首先，我們考慮到主體元素不設(shè)置 padding 的情況，為了防止內(nèi)容被我們的小三角背景色覆蓋，我們可通過加一個偽元素 ::before ，利用 border 來畫成一個三角形，代碼如下：
.chat-box {
// 其他樣式
&::before {
position: absolute;
top: 20px;
left: -8px; // 注意，這里做了略微調(diào)整
width: 0;width
height: 0;
border-color: transparent #fff9ed transparent transparent;
border-style: solid;
border-width: 8px 8px 8px 0;
content: '';
}
}
復(fù)制代碼現(xiàn)在是這個樣子：
注意，這里的小三角已經(jīng)是沒有右邊部分的了，解決了我們不設(shè)置 padding 時導(dǎo)致內(nèi)容被遮擋的問題。但是這樣就沒有辦法實(shí)現(xiàn)邊框，畢竟你已經(jīng)是使用邊框做出來的三角形了。
那我們就再使用一個偽元素唄， ::after 安排上了。接下來為大家提供一個思路：采用嘗試方案中的方式再畫一個正方形做旋轉(zhuǎn)，但是不為其設(shè)置背景色，只設(shè)置其 border ，調(diào)整下位置即可。
.chat-box {
// 其他樣式
&::before {}
&::after {
position: absolute;
top: 22px;
left: -7px;
width: 10px;
height: 10px;
/* border-color: inherit transparent transparent inherit; */
border-color: transparent;
border-style: solid;
border-width: 1px;
border-top-color: inherit;
border-left-color: inherit;
border-top-left-radius: 3px;
transform: rotate(-45deg);
content: '';
}
}
復(fù)制代碼可以看到，代碼中我設(shè)置上和左的 border-color 為 inherit ，表示繼承父級元素的 border-color ，因我注釋那部分的寫法不被識別，所以我們新增了幾行代碼實(shí)現(xiàn)，利用 inherit 可以在顏色更改時少寫顏色值的重復(fù)代碼，與 currentColor 想要達(dá)到的目的是一致的。
現(xiàn)在，越來越接近我們的目標(biāo)：
這里小三角還是沒有陰影，因?yàn)?box-shadow 并不會作用于偽元素，解決方案就是使用 filter 屬性， drop-shadow 接受的參數(shù)和 box-shadow 基本一致，我們替代它即可：
// box-shadow: 0 2px 6px rgba(250, 174, 67, 0.8);box-shadow
filter: drop-shadow(0 2px 6px rgba(250, 174, 67, 0.8));
復(fù)制代碼現(xiàn)在已經(jīng)完美實(shí)現(xiàn)～
實(shí)現(xiàn)一個完美的帶小箭頭的聊天框 - codepen（https://codepen.io/vortesnail/pen/mdPQgwY）
這個問題從我入職第一份工作之后困擾了我接近半年，我基本還是慣性思維，一眼看過去就是 flex彈性盒子 一把梭，于是我有了以下這種方案：
index.html 文件 ：
<body>
<div class="father">
<div class="child">Child1</div>
<div class="child">Child2</div>
<div class="child">Child3</div>
<div class="child">Child4</div>
<div class="child">Child5</div>
<div class="child">Child6</div>
<div class="child">Child7</div>
<div class="child">Child8</div>
<div class="child">Child9</div>
<div class="child">Child10</div>
</div>
</body>
復(fù)制代碼index.scss 文件 ：
.father {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
padding: 10px 0 10px 20px;
.child {
margin-right: 14px;
margin-bottom: 14px;
// 其他卡片樣式
}
}
復(fù)制代碼可以看到，我會為每個子元素都設(shè)置 margin-top 以及 margin-right 來固定他們之間的間距，但是因?yàn)槊恳恍凶钣疫叺淖釉匾灿?margin-right ，為了補(bǔ)償這個，我就將父元素的 padding-right 去掉了，這樣做的壞處太多了，需要自己去計(jì)算，做補(bǔ)償，而且右邊有時候容納不下一個完整的子元素，就會導(dǎo)致?lián)Q行而留下一大片白。。
為了能用彈性盒子做到想要的效果，我已經(jīng)把阮一峰老師的Flex 布局教程：語法篇看爛了。。根本沒法實(shí)現(xiàn)最佳最想要的效果，以上只是我多次嘗試之后唯一能接受的方案，我就這么個方案用了好多次。
直到有一天，我又遇到了這種布局需求，我辛辛苦苦用 js 去硬算他們之間的間距，算是實(shí)現(xiàn)了想要的效果，但是真的非常繁瑣，我就受不了了。這個時候我又偶遇了阮一峰老師的CSS Grid 網(wǎng)格布局教程，謝天謝地，采用 Grid 可完美實(shí)現(xiàn)以上需求！
Flex 布局是軸線布局，只能指定"項(xiàng)目"針對軸線的位置，可以看作是一維布局。Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局。Grid 布局遠(yuǎn)比 Flex 布局強(qiáng)大。
首先我們需要給容器指定為 grid 網(wǎng)格布局，就像 flex 一樣：
.father {
display: grid;
}
復(fù)制代碼接著要為其劃分列數(shù)， grid-template-columns 屬性可定義每一列的列寬，假如代碼如下，我們將容器劃分成 3 列，每列寬度為容器的 100px ：
.father {
grid-template-columns: 100px 100px 100px;
}
復(fù)制代碼但是這個時候我們看到的效果會是下面這樣：
子元素并沒有把父元素占滿，這顯然不是我們想要的效果，幸虧有 repeat() 函數(shù)幫助我們簡化重復(fù)值， 它接受兩個參數(shù)，第一個參數(shù)是重復(fù)的次數(shù)，第二個參數(shù)是所要重復(fù)的值 。上面的代碼完全可用以下代碼代替：
.father {
grid-template-columns: repeat(3, 100px);
}
復(fù)制代碼當(dāng)然，這只是第一步，我們還需要借助 auto-fill 關(guān)鍵字，在我們需要容器能盡可能容納子元素時，就需要用到它，表示自動填充，我的理解是 repeat() 接受了這個 auto-fill 的參數(shù)時，會去自動計(jì)算容納的數(shù)量，就好像你事先算出來這個容器能容納多少子元素，然后把這個“多少”傳給該函數(shù)一樣。這時候代碼如下：
.father {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
復(fù)制代碼現(xiàn)在圖形如下，已經(jīng)越來越接近我們的目標(biāo)了：
但是很顯然，右邊有一個空隙， justify-content 屬性拯救我們，它整個內(nèi)容區(qū)域在容器里面的水平位置，當(dāng)我設(shè)置其為 space-between 時，意味著子元素之間的間隔相等，而子元素與容器邊框之間沒有間隔。
不過子元素之間還是沒有間隔，簡單設(shè)置一下屬性 gap 即可，它是 column-gap 和 row-gap 的合并簡寫，分別表示列與列和行與行之間的間距，現(xiàn)在代碼如下：
.father {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
justify-content: space-between;
gap: 14px 4px;
}
復(fù)制代碼由此簡單的幾行代碼就已經(jīng)完美實(shí)現(xiàn)了我們想要的效果：
不過 grid 網(wǎng)格布局的兼容性不是很好，點(diǎn)此查看支持的瀏覽器列表～
利用 grid 實(shí)現(xiàn)完美的水平鋪滿、間隔一致的自適應(yīng)布局 - codepen（https://codepen.io/vortesnail/pen/NWNEmvx）
其實(shí)我一直很迷惑為什么 css3 不提供一些能調(diào)整虛線框的必要屬性，默認(rèn)的 dash-border 經(jīng)常會和 ui 所需要的虛線框要求會不一致，既然官方不支持，我們只能自己尋找一些解決方案。
這個解決方案看似很多，其實(shí)每一種解決方案都會有一定的局限性，選擇最合適的就是最好的，具體我列出了以下幾條：
index.html 文件 ：
<body>
<div id="box">
<div class="border-horizontal top"></div>
<div class="border-vertical right"></div>
<div class="border-horizontal bottom"></div>
<div class="border-vertical left"></div>
I am vortesnail, now i try to make a custom dashed border!
</div>
</body>
復(fù)制代碼index.scss 文件 ：
$border-color: #ccc;
$border-dashed-unit-width: 8px;
$border-dashed-unit-height: 1px;
$stroke-rate: 50%;
body {
#box {
width: 400px;
background: #fff;
padding: 10px;
box-sizing: border-box;
position: relative;
.border-horizontal {
position: absolute;
width: 100%;
height: $border-dashed-unit-height;
left: 0;
background-image: linear-gradient(
to right,
$border-color 0%,
$border-color $stroke-rate,
transparent $stroke-rate
);
background-size: $border-dashed-unit-width $border-dashed-unit-height;
background-repeat: repeat-x;
}
.border-vertical {
position: absolute;
width: $border-dashed-unit-height;
height: 100%;
top: 0;
background-image: linear-gradient(
to bottom,
$border-color $stroke-rate,
$border-color $stroke-rate,
transparent $stroke-rate
);
background-size: $border-dashed-unit-height $border-dashed-unit-width;
background-repeat: repeat-y;
}
.top {
top: 0;
}
.right {
right: 0;
}
.bottom {
bottom: 0;
}
.left {
left: 0;
}
}
}
復(fù)制代碼其實(shí)其思想很簡單，就是 4 個矩形，每個矩形加上漸變背景，并 repeat 即可模擬虛線效果，其間距、比例可根據(jù)我們設(shè)定的變量去調(diào)整。
但是它的弊端非常大，就是無法調(diào)整 border-radius ，即沒有圓角！這里向大家展示只是為了拋磚引玉，萬一你有更好的想法，或者你不需要圓角，那就可以用這個方案。效果如下：
其實(shí)我們借助 svg 就能比較不錯的實(shí)現(xiàn)自定義虛線框，如果不想自己寫 svg 的朋友可以直接在這個網(wǎng)站進(jìn)行調(diào)整和生成：Customize your CSS Border ，但如果你稍微了解一些 svg 的用法，也完全可以自己實(shí)現(xiàn)，如果你想了解一下，可閱讀這篇文章：SVG入門—如何手寫SVG
代碼如下： index.html 文件 ：
<body>
<div id="box">I am vortesnail, now i try to draw a dashed border box.</div>
</body>
復(fù)制代碼index.scss 文件 ：
body {
#box {
width: 400px;
border-radius: 4px;
padding: 10px;
background-image: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg">\
<rect width="100%" height="100%" rx="4" ry="4" style="stroke: black; stroke-width: 2px; fill: none; stroke-dasharray: 8px 5px; stroke-dashoffset: 10px;"/>\
</svg>');
}
}
復(fù)制代碼可通過 stroke-width 調(diào)整虛線框?qū)挾龋?stroke-dasharray 調(diào)整比例及長度、間距， stroke-dashoffset 調(diào)整偏移值。
tips：svg 方案在一些比較老的安卓機(jī)上會不兼容，即使在新的機(jī)型上，也會出現(xiàn)一些表現(xiàn)差異，雖然在 web 端支持 svg 的瀏覽器上表現(xiàn)是正常的，但若考慮到移動端用戶群體時，使用請慎重。
實(shí)現(xiàn)一個間距可調(diào)的虛線框 - codepen（https://codepen.io/vortesnail/pen/ZEWPwey）
很顯然，當(dāng)我們使用默認(rèn)的 input.checkbox 方案時，是沒有辦法改變其樣式的，而且在不同瀏覽器之間，其表現(xiàn)也不一致，代碼如下：
index.html 文件 ：
<body>
<div class="checkbox-container">
<input type="checkbox" id="apple">
<label for="apple">蘋果</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="banana" disabled>
<label for="banana">香蕉</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="watermelon">
<label for="watermelon">西瓜</label>
</div>
</body>
復(fù)制代碼index.scss 文件 ：
.checkbox-container {
display: flex;
align-items: center;
input[type='checkbox'] {
& + label {
color: #333;
}
}
input[type='checkbox']:disabled {
&+ label {
color: #c6c6c6;
}
}
}
復(fù)制代碼在 chrome 下表現(xiàn)為：
在 firefox 下表現(xiàn)為：
在 safari 下與在 firefox 下一致。
如果任由這種情況的發(fā)生，你們 ui 可能會找產(chǎn)品經(jīng)理和你打一架～
我們可以在不改變上面嘗試方案中的 html 結(jié)構(gòu)，只需 css 即可做到！給每一個 label 標(biāo)簽添加一個偽元素 ::before 作為復(fù)選框！
首先，我們給這個偽元素添加必要樣式，使其符合 ui 的設(shè)計(jì)：
input[type="checkbox"] {
& + label {
display: flex;
align-items: center;
}
& + label::before {
box-sizing: border-box;
content: "\a0"; /* 不換行空格 */
width: 13px;
height: 13px;
margin-right: 4px;
border-radius: 2px;
border: 1px solid #333;
}
}
復(fù)制代碼現(xiàn)在的拙劣效果如下：
我們發(fā)現(xiàn)，默認(rèn)的復(fù)選框還是存在的，我們怎么做到將其隱藏而不破壞其可訪問性呢（即不能使用 display: none ）？
input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
& + label {...}
& + label::before {...}
}
復(fù)制代碼以上隱藏的方案引用至 css揭秘151頁
現(xiàn)在點(diǎn)擊我們自定義的復(fù)選框是沒有任何效果的，接下來借助 css 的相鄰兄弟選擇器對 checked 狀態(tài)、disabled 狀態(tài)分別設(shè)置樣式即可：
input[type="checkbox"]:checked {
& + label::before {
background-color: #1890ff;
background-image: url("https://s1.ax1x.com/2020/10/11/0cUbi4.png");
background-repeat: no-repeat;
background-size: 100% 100%;
border: none;
}
}
input[type="checkbox"]:disabled {
& + label {
color: #868686;
cursor: not-allowed;
}
& + label::before {
border-color: #868686;
}
}
復(fù)制代碼可以看到，經(jīng)過此番處理后，我們可以完全自主地去設(shè)計(jì)復(fù)選框樣式，比如我在上面選中時，呈現(xiàn)了一張對勾的圖片： background-image: url("https://s1.ax1x.com/2020/10/11/0cUbi4.png"); ，這極大地方便了我們對其呈現(xiàn)形式的掌控。
除此之外，你還可以設(shè)置 input[type="checkbox"]:focus 時的樣式哦，趕快試試吧！
自定義復(fù)選框 - codepen（https://codepen.io/vortesnail/pen/abZOBjx）
css3 中引入了 resize 屬性，該屬性可以不通過 js 就可以改變設(shè)置該屬性的元素的寬度 width ，大家一定使用過 textarea 標(biāo)簽把？那個右下角的可拖拽更改長寬的東西就是該屬性的功勞。實(shí)際上，所有標(biāo)簽都可以設(shè)置該屬性！
于是，簡單的幾段代碼就可以達(dá)到交互式圖片對比效果，雖然和我們想要實(shí)現(xiàn)的效果有點(diǎn)差異，但如果要求不高的話，就采用它吧：
index.html 文件 ：
<div class="image-slider">
<div class="before-container">
<img src="https://img3.doubanio.com/view/photo/l/public/p2622600072.webp" alt="before">
</div>
<img src="https://img9.doubanio.com/view/photo/l/public/p2380745925.webp" alt="after">
</div>
復(fù)制代碼index.scss 文件 ：
.image-slider {
position: relative;
img {
display: block;
width: 720px;
user-select: none;
}
.before-container {
position: absolute;
top: 0;
left: 0;
width: 50%;
max-width: 100%; /* 防止容器寬度拉長至比圖片還寬 */
overflow: hidden; /* 必須不可見 */
resize: horizontal; /* 賦予水平寬度可拉伸功能 */
&::before {
position: absolute;
right: 0;
bottom: 0;
width: 12px;
height: 12px;
background: linear-gradient(-45deg, #000 50%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
content: '';
}
}
}
復(fù)制代碼我們利用一個偽元素 ::before 來對右下角的拉伸圖標(biāo)進(jìn)行覆蓋，以便于自定義樣式，現(xiàn)在效果如下：
這個方案弊端就是右下角的可拖拽圖標(biāo)無法更改位置和大小，即使我們利用偽元素去覆蓋，但是和我們需求中所需要的效果也相差甚遠(yuǎn)，于是我們不得不借助 js 了！
在上述方案中增加一個 span 標(biāo)簽用于畫我們的拖拽豎條，緊接著按照上述方案先將兩張照片的位置和大小調(diào)好：
index.html 文件 ：
<body>
<div class="image-slider">
<div class="before-container">
<img src="https://img3.doubanio.com/view/photo/l/public/p2622600072.webp" alt="before">
</div>
<img src="https://img9.doubanio.com/view/photo/l/public/p2380745925.webp" alt="after">
<span class="handler"></span>
</div>
</body>
復(fù)制代碼index.scss 文件 ：
body {
.image-slider {
position: relative;
img {
display: block;
width: 520px;
user-select: none;
pointer-events: none;
}
.before-container {
position: absolute;
left: 0;
top: 0;
width: 50%;
overflow: hidden;
}
}
}
復(fù)制代碼現(xiàn)在效果如下：
初步的效果出來了，接下來增加可拖拽改變水平寬度的功能。首先需要先在兩張圖片交際出添加一個豎形的條狀，用于拖拽位置，更改 class='handler' 樣式：
.handler {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 4px;
height: 100%;
background: rgba(0, 0, 0, 0.4);
transform: translateX(-50%);
cursor: ew-resize;
}
復(fù)制代碼注意中間的透明豎形條狀即是我們可拖拽的位置：
接下來寫我們的 js 腳本，首先通過原生 js 方法找到三個 dom 節(jié)點(diǎn)：
index.js 文件 ：
const imageSlider=document.querySelector(".image-slider");
const beforeContainer=document.querySelector(".before-container");
const handler=document.querySelector(".handler");
復(fù)制代碼然后我們還需要獲得 image-slider 這個最外層元素相對頁面左邊的距離，我們定義為變量 leftX ，并在鼠標(biāo)于 handler 元素上按下時計(jì)算該值：
let leftX;
handler.onmousedown=(e)=> {
leftX=e.pageX - handler.offsetLeft;
};
復(fù)制代碼用一張圖來解釋說明下：
然后在給 window 對象添加一個 mousemove 的監(jiān)聽事件，該回調(diào)用于改變 handler 位置和 before-image 的寬度：
handler.onmousedown=(e)=> {
leftX=e.pageX - handler.offsetLeft;
window.addEventListener('mousemove', moveHandler)
};
const moveHandler=e=> {
const beforeWidth=e.pageX - leftX;
const imageSliderWidth=imageSlider.offsetWidth;
if (beforeWidth >=0 && beforeWidth <=imageSliderWidth) {
handler.style.left=beforeWidth + 'px';
beforeContainer.style.width=beforeWidth + 'px';
}
}
復(fù)制代碼目前為止，我們拖拽 handler 已經(jīng)能實(shí)現(xiàn)所需的效果，但是無法停止，我們需要添加一個鼠標(biāo)按鍵抬起的監(jiān)聽事件，需要注意的是不能在 handler 上添加，比如： handler.onmouseup ，必須在 window 對象上添加，具體為什么，大家可以動手試試就知道了：
window.onmouseup=(e)=> {
window.removeEventListener('mousemove', moveHandler)
};
復(fù)制代碼到此為止，就已經(jīng)完美實(shí)現(xiàn)了該效果，大家還可以在 handler 上做更多工作，使其用戶體驗(yàn)達(dá)到更好～
交互式圖片對比效果 - codepen（https://codepen.io/vortesnail/pen/wvWaJRB）
首先很明確的是，先將內(nèi)容滾動條搞出來：
index.html 文件 ：
<body>
<div class="content-wrapper">
<header>目錄</header>
<div class="list-wrapper">
<ul>
<li>如何長高</li>
...省略
</ul>
</div>
</div>
</body>
復(fù)制代碼index.scss 文件 ：
body {
.content-wrapper {
width: 248px;
padding: 20px 0;
background: #fafafa;
header {
padding: 0 20px 0 24px;
font-weight: 500;
font-size: 16px;
}
.list-wrapper {
ul {
height: 400px;
padding: 0 20px 0 24px;
overflow-y: auto;
color: #595959;
li {
padding: 6px 0;
font-size: 14px;
list-style: none;
}
}
}
}
}
復(fù)制代碼現(xiàn)在效果如下：
接下來為滾動范圍的頂部和底部都先加上我們所需要的漸變層，通過父容器的 ::before 和 ::after 偽元素來實(shí)現(xiàn)，同時動態(tài)為 list-wrapper 這個元素增加兩個類名，用于控制漸變層的顯隱：
.list-wrapper {
position: relative;
&::before {
position: absolute;
right: 0;
left: 0;
z-index: 1;
height: 60px;
content: '';
pointer-events: none;
}
&.top-gradient::before {
top: 0;
background: linear-gradient(to bottom,#fafafa,hsla(0,0%,98%,.5) 84%,hsla(0,0%,98%,.13));
}
&::after {
position: absolute;
right: 0;
left: 0;
z-index: 1;
height: 60px;
content: '';
pointer-events: none;
}
&.bottom-gradient::after {
bottom: 0;
background: linear-gradient(to top,#fafafa,hsla(0,0%,98%,.5) 84%,hsla(0,0%,98%,.13));
}
}
復(fù)制代碼但是我們想要達(dá)到的效果是：一旦滾動條不是最頂部，頂部就要有漸變層；一旦滾動條不是最底部，底部就要有漸變層。現(xiàn)在完全是寫死在兩頭，需要通過簡單的 js 腳本來判斷 ul 元素的滾動條的位置：
index.js 文件 ：
const listWrapper=document.querySelector(".list-wrapper");
const ul=document.querySelector("ul");
const onScroll=(e)=> {
// 滾動條是否在頂部
if (e.target.scrollTop > 0) {
listWrapper.classList.add("top-gradient");
} else {
listWrapper.classList.remove("top-gradient");
}
// 滾動條是否在底部
if (e.target.scrollHeight - e.target.scrollTop !==ul.offsetHeight) {
listWrapper.classList.add("bottom-gradient");
} else {
listWrapper.classList.remove("bottom-gradient");
}
};
ul.addEventListener("scroll", onScroll);
復(fù)制代碼最后再將原生滾動條隱藏，OK！
ul {
...
scrollbar-width: none;scrollbar-width /* Firefox */
-ms-overflow-style: none; /* IE10+ */
&::-webkit-scrollbar {
display: none; /* Chrome */
}
}
復(fù)制代碼順帶說一句，在 codepen 中滾動條隱藏不了，本地調(diào)試時可以，我也不曉得啥問題～
實(shí)際上上述方案是我看《css揭秘》之后想到的，在這本書中，講到了利用兩層 background 以及 background-attachment 屬性來進(jìn)行漸變層的實(shí)現(xiàn)，但是我按書中實(shí)現(xiàn)之后，發(fā)現(xiàn)效果并不完美，甚至可以說有很大缺陷！我想了好久還是覺得用 js 方便，css 看起來是無法實(shí)現(xiàn)我想要的效果的！
所以上述方案就是最終改進(jìn)方案，《css揭秘》中的方法我實(shí)在不敢認(rèn)同，不過關(guān)于 background-attachment 屬性的介紹倒是給我學(xué)到了～
透明度漸變層代替滾動條提示 - codepen（https://codepen.io/vortesnail/pen/PozqKyM）
雖然標(biāo)題寫了是 css3，但是還是難免涉及到了 js，我的目的是希望有同類需求的小伙伴能通過本篇文章得到幫助。歡迎各位理性討論～如果有更好的方法，請大佬們務(wù)必不吝賜教！如果你已經(jīng)看到此處，干脆點(diǎn)個贊再走吧～
作者：vortesnail
鏈接：https://juejin.cn/post/6882704719882485774
來源：掘金
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
