cssは0.5 pxのborderを実現する

携帯電話のページを作るとき、原生の1 pxの下線の効果を真似する必要があることがあります.普通のcss 1 pxは原生のより太いように見えます.だから、0.5 pxのborderを実現してこの効果を実現することを考えることができます.少数のデバイスだけが0.5 pxという属性値をサポートしているので、他の方法で実現するしかありません.例えば、

.5px border

 .btn {
        position: relative;
        width: 200px;
        height: 42px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-align: center;
        line-height: 42px;
        background-color: #ededed;
      }
      .btn:before {
        content: "";
        position: absolute;
        top: -50%;
        bottom: -50%;
        left: -50%;
        right: -50%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        border-style: solid;
        border-width: 1px;
        border-color: red;
        -webkit-border-radius: 10px;
        border-radius: 10px;
      } ------------------------------------------------------------------------------------------- ， ，
 
 

PostCSS Write SVG

border-imageを使用するたびに画像を調整するには、常にコストがかかります.上記の理由に基づいて、PostCSSのプラグインpostcss-write-svgを利用して私たちを助けることができます.プロジェクトにPostCSSが既に使用されている場合は、このプラグインをプロジェクトにインストールするだけです.コードで使用します.
@svg 1px-border {
    height: 2px;
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 50%;
    }
}
 
.example {
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}
これでPostCSSは自動的にCSSをコンパイルします.
.example {
    border: 1px solid transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}
PostCSSのプラグインを使うのは、私たちが画像を修正するよりも簡単で便利ではないでしょうか.
PostCSSのpostcss-write-svgプラグインを使用すると、border-imageを使用して1 pxの枠線効果を実現できるほか、background-imageを使用して実現することもできます.例:
@svg square {
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 100%;
    }
}
 
#example {
    background: white svg(square param(--color #00b1ff));
}
コンパイルすると次のようになります.
#example {
    background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
この案は簡単で使いやすいので、私に必要なものです.現在テストして、基本的に私の必要な需要を達成することができて、最新の適合案の中で、私もこのプラグインを採用して1 pxフレームの問題を処理しました.
このほか、background-image、box-shadow、transformなど、他の案も整理されています.
このうちbox-shadowは推奨されていませんが、background-imageは上記のPostCSS案と少し似ていますが、PostCSSの方が便利で、耐えられないので、transformと偽元素や偽類の組み合わせは役に立ちます.例:
.hairlines li{
    position: relative;
    border:none;
}
.hairlines li:after{
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 0 0;
}
使用する場合も、JavaScriptコードと合わせてRetina画面かどうかを判断する必要があります.もちろんJavaScriptで判断するほか、メディアクエリーで処理することもできます.
またios border-imageが無効であれば出る必要があります
枠は特殊な模様が必要なのでborder-imageで実現する予定です.
?
1 2 3 4 5 6 7 8
.example{  ……    border:6px solid transparent;  -webkit-border-image:url(../img/border_img.jpg) 6 6 round;  border-image:url(../img/border_img.jpg) 6 6 round;  …… }
 
最終的にアンドロイドが正常であることが分かった.IOSフレームは表示されません.
解決策は次のとおりです.
border:6 px solid transparent;別のプロパティ、すなわちborder-styleとborder-widthに置き換えます.
?
1 2 3 4 5 6 7 8
example{   ……   border-style: solid;   border-width: 6px;   -webkit-border-image:url(../img/border_img.jpg) 6 6 round;   border-image:url(../img/border_img.jpg) 6 6 round;   ……  }