BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル]cssに0.5pxの行を実装してモバイル互換の問題を解決する（推奨）

2022-02-02 15:28:43

[コンテンツ]をクリックします。 <リンク

1. background-image gradient styleを使用する。

2. スケールの拡大縮小を使用することができます

3. 擬似要素にボーダーを設定する 

Insert the code snippet here<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>0.5px line implementation method</title>
 <style type="text/css">
 /*Standard 1px border*/
 .b1{
 height: 40px;
 border: 1px solid #ff0000;
 }
 /*1. can be used to achieve .5px using the gradient style => */
 .a1{
 height: 1px;
 margin-top: 20px;
 background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
 }
 /*2. You can achieve .5px*/ using scaling-fail=>
 .a2{
 height: 1px;
 margin-top: 20px;
 background-color: #f00;
 -webkit-transform: scaleY(.5);
 transform:scaleY(.5);
 }
 /*3. Required styles for all four borders*/
 .scale-half {
 margin-top: 20px;
 height: 100px;
 border:1px solid #f00;
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
 -webkit-transform: scale(.5, .5);
 transform: scale(.5, .5);
 }
 /*4. Add a border to the pseudo-element*/
 .border3{
 position: relative;
 }
 .border3:before{
 content: '';
 position: absolute;
 width: 200%;
 height: 200%;
 border: 1px solid blue;
 -webkit-transform-origin: 0 0;
 -moz-transform-origin: 0 0;
 -ms-transform-origin: 0 0;
 -o-transform-origin: 0 0;
 transform-origin: 0 0;
 -webkit-transform: scale(.5, .5);
 -ms-transform: scale(.5, .5);
 -o-transform: scale(.5, .5);
 transform: scale(.5, .5);
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 }
 </style>
</head>
<body>
<div class="b1">normal 1px border</div>
<div class="a1"></div>
<div class="a2"></div>
<div class="scale-half"></div>
<div class="border3">
 <div class="content">Pseudo-class set border</div>
</div>
</body>
</html>

モバイル互換性の問題を解決するために0.5pxの行を実装するCSSに関するこの記事は（推奨）これに導入され、より関連するCSS実装0.5px行の内容は、スクリプトホーム以前の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来よりスクリプトホームをサポートして願っています！。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します