CSS 3で細い境界線を実装するにはどうすればよいですか? _html/css_WEB-ITnose

アプリ開発では、アプリケーションのスタイルを設定するためにcss3を使用する必要があることがよくあります。アプリはモバイル デバイスに表示されるため、境界線のストロークは通常 1px 未満です。以前は 1px 以上を使用していました。そこで問題は、1px より小さい境界線をどのように扱うかということです。 CSS3で細い線を書く方法をいくつか紹介しますので、同じような問題に遭遇した子供たちの参考になれば幸いです。

1. 背景として高さ 2 ピクセル (カラーあり 1 ピクセル、カラーなし 1 ピクセル) を左上に設定します。

背景サイズ: 100% 1px;

背景位置: 左下; li>

この方法の問題点は、左右の境界線のストロークを回転（変形）することはできますが、境界線の色を変更したい場合は、別の画像を作成する必要があることです。上記の方法では、線形グラデーション (linear-gradient) も簡単に考えることができます。具体的な実装は次のとおりです。 %,透明 50%);

背景画像: -moz-linear-gradient(#222 50%,透明 50%) );

背景画像: -o-linear-gradient(#222 50%,透明50%);

背景-画像: 線形グラデーション(#222 50%、透明 50%);

背景サイズ: 100% 1px;

背景-繰り返し: no-repeat;

背景-位置: bottom;}

• linear-gradient
• linear-gradient
• linear-gradient< ;/li>

この方法はまだ完璧ではありません。ストロークの位置 (左、上、右、下) を変更する必要があります。たとえば、左のストロークを変更する必要があります。

background-image: -webkit-linear-gradient(left,transparent 50%,#222 50%);

background-size: 1px 100% ;

background-position: left;

3.細い境界線の問題を解決する他の方法はありますか? CSS3 シャドウ (box-shadow) を試し、シャドウをストロークとして使用し、疑似クラスを使用して余分な部分をカバーするのもよいでしょう:

.line li{box-shadow: inset 0 -1px 1px #000;background : # fff;マージン左: -1px;マージン下: 10px;位置: 相対;}

.line li::after{content:'';位置: 絶対;上:0;左: 0px;右: 0px;底部: 0px;ボーダー: 1px 実線 #fff;}

• box-shadow
• box-shadow

• box-shadow

ただし、エディターが共有するいくつかのメソッドにはまだ欠陥があります。どのメソッドを使用するかは、状況に応じて決定できます。状況について。より完璧な解決策をお持ちの場合は、ぜひ共有してください。そうすれば、誰もが一緒に学び、進歩することができます。