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 との統合

推薦する

WeChatアプレット開発の章:落とし穴の記録

最近、会社初のミニプログラムの開発に参加しました。開発経験は基本的にWebViewをベースとしたハイ...

Docker nginx + https サブドメイン設定の詳細なチュートリアル

今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...

Ubuntu システムに Theano と Keras をインストールする方法

注: システムは Ubuntu 14.04LTS、32 ビット オペレーティング システムです。Py...

Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド

この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...

202 無料の高品質 XHTML テンプレート (1)

ここで 123WORDPRESS.COM はこれらのテンプレートの最初の部分を紹介します。各テンプレ...

MySQLはパスワードなしでログインする例を実装しています

具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...

Vueリストレンダリングキーの原理と機能の詳細な説明

目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...

Vue で PC 解像度の適応を実装するためのサンプルコード

目次プラン依存関係をインストールする依存関係の導入pxをremに変換するFlexible.jsを変更...

MySQL innodb B+ツリーの高さを取得する方法

序文MySQL の InnoDB エンジンがインデックスの保存に B+tree を使用する理由は、デ...

MySQL の左結合操作における on 条件と where 条件の違いの紹介

優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...

MySQLでクエリキャッシュを実行する方法と失敗を解決する方法

関数を使用する前にパラメータのプロパティを理解して、関数の使い方をより深く理解する必要があることは誰...

PHP-HTMLhtml 重要な知識ポイントメモ(必読)

1. フレームセット、フレーム、iframeを使用して複数のウィンドウを実現する2. 画像上のマッ...

Kubernetes を使用して Springboot または Nginx をデプロイするための詳細なチュートリアル

1 はじめに「Maven がワンクリックで Springboot を Docker リポジトリにデプ...

jQuery を使用してカルーセル効果を実装する

この記事では、jQueryでカルーセルチャートを実装するための具体的なコードを参考までに共有します。...