1px問題解決方案
阿新 • • 發佈：2018-12-23
方案一：使用background-image
優點:
可以設定單條,多條邊框
可以設定顏色
缺點:
大量使用漸變可能導致效能瓶頸
程式碼量大
多背景圖片有相容性問題
方案二：使用scaleY和:after、:before 缺點： 圓角無法實現，實現4條邊框比較麻煩，並且只能單獨實現，如果巢狀，會對包含的效果產生不想要的效果，所以此方案配合:after和before獨立使用較多。 比如畫一個商品的邊框四條線，容器的after和before可以畫2條線，利用容器的父元素的after、before再畫2條線。
< body> < div class= "bt" ></div > < div class= "box" ></div > < div class= "bt" ></div > < div class= "pox" ></div > </ body > < style type = "text/css"> * {padding : 0 ; margin: 0; } div { margin-top : 10 px; width : 100 %; height : 100 px; overflow : hidden ; -webkit-box-sizing : border-box ; //應該可以刪除 } /*單條線*/ .bt { height: 1px; /*寫了1px的話，此div就只是一條邊*/ background-image : -webkit-linear-gradient( top ,transparent , #000) ; background-repeat : no-repeat ; background-position : top left ; background-size : 100 % 1 px; } /*多條線*/ .pox { background-image : -webkit-linear-gradient( top ,transparent , #000) , -webkit-linear-gradient( right ,transparent , #000) , -webkit-linear-gradient( bottom ,transparent , #000) , -webkit-linear-gradient( left ,transparent ,#000); background-repeat : no-repeat ,no-repeat , no-repeat, no-repeat ; background-position : top left , top right ,bottom left, top left ; background-size : 100 % 1 px, 1 px 100 %, 100 % 1 px, 1 px 100 %; } </ style>
方案二：使用scaleY和:after、:before 缺點： 圓角無法實現，實現4條邊框比較麻煩，並且只能單獨實現，如果巢狀，會對包含的效果產生不想要的效果，所以此方案配合:after和before獨立使用較多。 比如畫一個商品的邊框四條線，容器的after和before可以畫2條線，利用容器的父元素的after、before再畫2條線。
< body> < div class= "box" ></div > < div class= "bt" ></div > < div class= "pox" ></div > </ body > < style type = "text/css"> * {padding : 0 ; margin: 0; } div { width : 100 %; height : 100 px; overflow : hidden ; } .box { position : relative ; } .box :before { position : absolute ; content : "" ; top : 0 ; left : 0 ; width : 100 %; height : 1 px; background-color : #000 ; -webkit-transform : scaleY ( 0.5) ; transform : scaleY ( 0.5) ; -webkit-transform-origin : 0 0 ; transform-origin : 0 0 ; } .box :after { position : absolute ; content : "" ; bottom : 0 ; left : 0 ; width : 100 %; height : 1 px; background-color : #000 ; -webkit-transform : scaleY ( 0.5) ; transform : scaleY ( 0.5) ; -webkit-transform-origin : 0 0 ; transform-origin : 0 0 ; } </ style>