CSS で QR コードスキャンボックスを実装するためのサンプルコード

CSS で QR コードスキャンボックスを実装するためのサンプルコード

カメラを開くと通常はスキャンボックスが表示されますが、静的なQRコードではフォーカスを合わせたりスキャンしやすくするためのフレームが追加されることもあります。CSSでフレームを実装する方法は次のとおりです。

効果:

コードは次のとおりです。

html:

<div class="img-box">
    <img class="code" src="https://image-static.segmentfault.com/149/570/149570997-5b987cc928d69_articlex">
</div>

css:

.img-ボックス{
  背景: linear-gradient(#ae0000, #ae0000) 左上、
    linear-gradient(#ae0000, #ae0000) 左上、
    linear-gradient(#ae0000, #ae0000) 右上、
    linear-gradient(#ae0000, #ae0000) 右上、
    linear-gradient(#ae0000, #ae0000) 右下、
    linear-gradient(#ae0000, #ae0000) 右下、
    linear-gradient(#ae0000, #ae0000) 左下、
    linear-gradient(#ae0000, #ae0000) 左下;
  背景繰り返し: 繰り返しなし;
  背景サイズ: 2px 20px、20px 2px;
  高さ: 116px;
  幅: 116ピクセル;
}        
.コード {
    高さ: 110px;
    幅: 110ピクセル;
    上マージン: 2px;
    左マージン:2px;
    境界線: 1px 実線 #ae0000;
}    

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  WeChatミニプログラムでトークンの有効期限を処理する方法

>>:  tomcat デプロイメント プロジェクトの実装と IDEA との統合

推薦する

JSネイティブ2列シャトル選択ボックスの実装例

目次いつ使うか構造的ブランチコードいつ使うか選択動作を完了するには、2 つの列間で要素を直感的に移動...

Google の新しい UI から学べること (画像とテキスト)

2011 年に最も顕著なウェブサイトの変更は、一連の製品に新しいユーザー インターフェースを導入した...

Element UI をインストールして vue3.0 でベクター グラフィックスを使用する方法

ここでは、v3 のインストールと使用にのみ焦点を当てます。v2 について学びたい場合は、公式 Web...

JSを使用して簡単な計算機を実装する

JSを使用して、参考用の簡単な計算機を完成させます。具体的な内容は次のとおりです。要件: 入力値は数...

vue3.0プロジェクトアーキテクチャを段階的に構築する方法を教えます

目次序文: 1. vue-cliでプロジェクトを作成する2. ルーターをインストールする3. ディレ...

MySQL で時刻と日付の型を保存する際の選択問題を分析する

一般的なアプリケーションでは、timestamp、datetime、int 型を使用して時間形式を保...

Apache での ab パフォーマンス テスト結果を分析する

私はパフォーマンス テストを行うために常に Loadrunner を使用してきました。 Loadru...

XHTML 入門チュートリアル: テーブルタグの応用

<br />テーブルは XHTML では扱いにくいタグなので、このセクションで理解するだ...

Dockerは異常なコンテナ操作を排除する

この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...

React-Dropzone をベースにアップロードコンポーネント機能を開発する (サンプルデモ)

今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...

HTMLでカメラを読み込む方法

効果図: 全体的な効果: ビデオ読み込み中: 写真:ステップ1: HTML要素を作成するまず、HTM...

myisamchk および mysqlcheck ツールを使用して破損した MySQL データベース ファイルを迅速に修復する方法

サーバーのデータベース ハード ディスク領域がいっぱいだったため、大量のデータの書き込みに失敗し、「...

モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)

モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...

js は複数の画像を zip にパッケージ化します

目次1. ファイルをインポートする2. HTMLページ3. メインコード4. 画像をbase64に変...

アイデアを使用して Springboot 初期化サーバーを構築する際の問題分析

問題の説明最近、Springbootプロジェクトを構築していたところ、会社のネットワークケーブルに接...