這是border.css的一段原始碼       先說明為啥會有1畫素這種問題吧 :因為當我們在做移動端 時當適配不同的手機時 每個手機的dpr是不同的 （dpr=物理畫素/邏輯畫素  物理畫素也就是真實呈現在手機螢幕上的大小 邏輯畫素則是開發人員寫入的畫素）     所以當你設定了 1px的邊框 如果在dpr 高的手機上會顯得很粗      然後我們說明解決方案 和 原理 ： 給這個元素設定一個相對定位 然後在給這個元素新增一個偽元素 並且給這個偽元素設定一個絕對定位  微元素動態獲取dpr進行等比擴大寬高並且運用c3的transform等比縮放     下面是sass中的程式碼 @charset "utf-8"; /** * @module 背景與邊框 * @description 為元素新增邊框（包括1px邊框） * @method border * @version 2.0.0 * @param {String} $border-width 指定邊框厚度（單位為px），預設值：1px，取值與`border-width`屬性一致，不同方向代表邊框位置 <2.0.0> * @param {String} $border-color 指定邊框顏色 <2.0.0> * @param {String} $border-style 指定邊框樣式 <2.0.0> * @param {String} $radius 指定邊框圓角半徑，預設值：null <2.0.0> */ @mixin border($border-width: 1px, $border-color: map-get($base,  border-color), $border-style: solid, $radius: null) {     // 為邊框位置提供定位參考     position: relative;     @if $border-width == null {         $border-width: 0;     }     border-radius: $radius;     &::after {         // 用以解決邊框layer遮蓋內容         pointer-events: none;         position: absolute;         z-index: 999;         top: 0;         left: 0;         // fix當元素寬度出現小數時，邊框可能顯示不全的問題         // overflow: hidden;         content: "\0020";         border-color: $border-color;         border-style: $border-style;         border-width: $border-width;         // 適配dpr進行縮放         @include responsive(retina1x) {             width: 100%;             height: 100%;             @if $radius != null {                 border-radius: $radius;             }         }         @include responsive(retina2x) {             width: 200%;             height: 200%;             @include transform(scale(.5));             @if $radius != null {                 border-radius: $radius * 2;             }         }         @include responsive(retina3x) {             width: 300%;             height: 300%;             @include transform(scale(.33333));             @if $radius != null {                 border-radius: $radius * 3;             }         }         @include transform-origin(0 0);     } } 下面是若使用styl時的程式碼 border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0)   // 為邊框位置提供定位參考   position: relative;     if $border-width == null     $border-width: 0;     border-radius: $radius;     &::after     // 用以解決邊框layer遮蓋內容     pointer-events: none;     position: absolute;     z-index: 999;     top: 0;     left: 0;     // fix當元素寬度出現小數時，邊框可能顯示不全的問題     // overflow: hidden;     content: "\0020";     border-color: $border-color;     border-style: $border-style;     border-width: $border-width;          // 適配dpr進行縮放     @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx)       width: 100%;       height: 100%;       if $radius != null {         border-radius: $radius;       }          @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)       width: 200%;       height: 200%;       transform: scale(.5)       if $radius != null {         border-radius: $radius * 2;       }          @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: 2.5dppx)       width: 300%;       height: 300%;       transform: scale(.33333)       if $radius != null {         border-radius: $radius * 3;       }       transform-origin: 0 0; 下面是我在開發react專案時運用了styled-component時封裝的 import styled from 'styled-components' const border = ({       component = null,       width = '1px',       style = 'solid',       color = '#ccc',       radius = 0 }) => {       return styled(component)       `     position: relative;     border-width: ${ width };     border-radius: ${ radius + 'px' };     &::after {       pointer-events: none;       position: absolute;       z-index: 999;       top: 0;       left: 0;       content: "";       border-color: ${ color };       border-style: ${ style };       border-width: ${ width };       @media         (max--moz-device-pixel-ratio: 1.49),         (-webkit-max-device-pixel-ratio: 1.49),         (max-device-pixel-ratio: 1.49),         (max-resolution: 143dpi),         (max-resolution: 1.49dppx) {           width: 100%;           height: 100%;           border-radius: ${ radius + 'px' };         };              @media         (min--moz-device-pixel-ratio: 1.5) and  (max--moz-device-pixel-ratio: 2.49),         (-webkit-min-device-pixel-ratio: 1.5) and  (-webkit-max-device-pixel-ratio: 2.49),         (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),         (min-resolution: 144dpi) and (max-resolution: 239dpi),         (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {           width: 200%;           height: 200%;           transform: scale(.5);           border-radius: ${ radius * 2 + 'px'};         };              @media         (min--moz-device-pixel-ratio: 2.5),         (-webkit-min-device-pixel-ratio: 2.5),         (min-device-pixel-ratio: 2.5),         (min-resolution: 240dpi),         (min-resolution: 2.5dppx) {           width: 300%;           height: 300%;           transform: scale(.33333);           border-radius: ${ radius * 3 + 'px' }         };         transform-origin: 0 0;     };   ` } export default border