カメラを開くと通常はスキャンボックスが表示されますが、静的な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 との統合
最近、会社初のミニプログラムの開発に参加しました。開発経験は基本的にWebViewをベースとしたハイ...
今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...
注: システムは Ubuntu 14.04LTS、32 ビット オペレーティング システムです。Py...
この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...
ここで 123WORDPRESS.COM はこれらのテンプレートの最初の部分を紹介します。各テンプレ...
具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...
目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...
目次プラン依存関係をインストールする依存関係の導入pxをremに変換するFlexible.jsを変更...
序文MySQL の InnoDB エンジンがインデックスの保存に B+tree を使用する理由は、デ...
メディアデバイスタイプの使用法の詳細な説明: <!DOCTYPE html> <h...
優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...
関数を使用する前にパラメータのプロパティを理解して、関数の使い方をより深く理解する必要があることは誰...
1. フレームセット、フレーム、iframeを使用して複数のウィンドウを実現する2. 画像上のマッ...
1 はじめに「Maven がワンクリックで Springboot を Docker リポジトリにデプ...
この記事では、jQueryでカルーセルチャートを実装するための具体的なコードを参考までに共有します。...